Why store dist in github repo and npm? - javascript

I saw many repo, that contains dist folder. Why? I think repo should store only source code, without any builds and so on.
Let's look at follow example with ES6 code.
package.json
{
"files": [
"dist",
"lib"
],
"scripts": {
"build:lib": "<transform ES6 to ES5 and put it to ./lib folder>",
"build:umd": "<make a umd module and put it ./dist folder>",
"build": "npm run build:lib && npm run build:umd",
"postbuild": "<make minify code>"
"prepublish": "npm run build"
}
}
I think this is a good way. And I saw several repo that do the same. In this situation github repo would store only src and npm repo only lib and dist.
And now another question. Why store dist and lib in npm? Most libraries can be installed by executing npm install command. And how we know prepublish script runs on local npm install (npm-scripts).
So after package have installed we have lib and dist folders.
I don't understand why store this code in npm if only source code is enough?

It appears that repositories include dist directories in order to enable other projects to use them as direct dependencies via git. Compare package.json docs, though as of now this doesn't mention that artefacts need to be present.
Compare NPM: Missing dist and src directories when trying to install directly from a github url for the problem that arises if the dist directory is not checked in.

Alternatively, it is also possible to install from a Git repository directly as long as a prepare stage which builds the package is provided:
{
...
"scripts": {
...
"prepare": "npm run build"
},
...
}
This way, you won't have to store /dist folder in the repository itself

Related

Difference between npm run dev and parcel index.html

I can use parcel index.html to create a local development server, bundling and hot module replacement. But it have come to my attention that using npm run dev does kind of the same think, so my question is:
what is the difference between the two? and how npm run dev is making the bundling process?
NPM vs Parcel isn't a valid comparison. They are two separate things. You can use Parcel with both NPM and Yarn.
Parcel is a web application bundler that is comparable to Webpack
NPM is a package management system for node.
npm run * is a command that will execute any npm script specified within your package.json and has no exclusivity to Parcel. You can of course make an npm script that will execute Parcel commands.
If you go into your package.json file, you will see a scripts property. Within this object, you can define arbitrary scripts to run. There are reserved script names such as start, install, build among others, but for the most part, this is a "free-for-all" that enabled the developer to specify any arbitrary scripts to run. A few common scripts that you'll typically see scripts to bundle your project or run a linter.
Example of package.json
Webpack Example:
{
"scripts": {
"build": "webpack --config <your entry file>"
}
}
Parcel Example:
{
"scripts": {
"build": "parcel build <your entry file>"
}
}

How to install npm dependencies inside a sub directory?

I have a package.json in the root: "install": "cd packages/my-package && yarn".
When I run yarn run install all I'm asking is that it goes into this package, installs the node_modules and dependencies and that's it. For some reason no matter what I try (yarn workspaces/lerna/manually etc.) it is installing node_modules in all packages, including the root.
WHY?! Just let me install them separately :(
Anyone knows how to easily fix this?
To move the basefolder of node_modules, you will have to create a .yarnrc file in the same directory as your package.json file. Your .yarnrc file should look like
--modules-folder packages/my-packages
The resulting output will put all of your packages after my-packages
/packages/my-packages/WHERE_YOUR_PACKAGES_GO

How to Share Build Scripts In Lerna Packages

I have a lerna repo that contains multiple packages organised in the usual structure:
package.json
/packages
- alpha
package.json
- bravo
package.json
- charlie
package.json
I need to transpile all packages, and I currently have the following scripts in each package's package.json:
"build": "npm run build:noWatch -- --watch --verbose",
"build:noWatch": "babel src --out-dir lib --root-mode upward --ignore '**/*.test.js','**/__tests__'",
"prebuild": "rimraf lib/*"
I currently run a build using:
lerna run build --stream --parallel
However I don't want to duplicate these scripts for every package. I would like to define the scripts in a single place, but use them from all packages. I currently have linting scripts and testing scripts in my root package which make sense there as they are effectively traversing the whole monorepo looking for tests, or files to lint. It doesn't seeem to make sense to move the build scripts up there as well as they are scoped to the individual packages, and I like the fact that I get different colour output for each package when I use lerna run.
An unsatisfying solution is to create some shell scripts in the root of the monorepo and call them from the packages' package.json files:
In root/packages/example/package.json:
"scripts": {
"build": "../../scripts/build.sh",
"build:noWatch": "../../scripts/build.sh",
"prebuild": "../../scripts/prebuild.sh"
},
Then in root/scripts/build.sh:
#!/bin/sh
babel src --out-dir lib --root-mode upward --ignore '**/*.test.js','**/__tests__' --watch --verbose
Whilst this works, it doesn't feel right: it still involves duplication between the packages and requires setting permissions on the shell scripts (which complicates CI).
Is there a better way to share these commands amongst all my packages?
Package all the build scripts into their own module and then use lerna --hoist to host the common module so it is installed once but available to all the other packages.

Npm module not found

I'm running an Angular app built with Grunt and using Bower and NPM.
I tried installing my npm module locally. The files are in the main app directory in node_modules folder.
The module docs ask me to load the module with <script type="text/javascript" src="node_modules/moment/moment.js"></script>, but I get 404.
Am I missing something? Do I have to tell Grunt that I want these NPM modules?
Can you provide more information on what your app is built with? If node serves your app, you need to make the directory you link to public. Assuming you're using express, this would look something like this in your app.js file:
app.use('/node_modules', express.static(__dirname + '/node_modules/moment/moment.js'));
Edit:
Or if you just want to make it work, try to load moment.js from CDN like this:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
Link to moment on CDN
Basically, npm is the package manager for all the javaScript frameworks such as Nodejs, angularjs etc. npm should be installed globally in the machine.You can install it from https://nodejs.org/en/ .
Next,you need check for the package.json file in your project.
If there is a package.json already existing in your project folder, then from command line you need to go to your project folder and type npm start.
If package.json file does not exist, then in the command line type npm init,then there will be a package.jsonfile created in your project folder.Then edit the package.json . and add the node packages into the package.json as similar way to this
{
"name": "shoppingkart",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www" //If you have any scripts.
},
"dependencies": {
"mongoose": "^4.9.0", // here you should have all your node_modules listed
"passport": "^0.3.2",
"stripe": "^4.15.1"
}
}
if you are not able to add the dependencies to json file, there is also another way to do it.
just go to your project directory in the command line and type
npm install --save grunt // And you need to do for all the node_modules, by replacing the **grunt**.
Automatically the dependency will be added to your package.json file.
If you installed your npm packages locally then your node_modules folder should found at the root of your project.
If you installed all your packages globally you may not see an npm_modules folder in your project.
To see where your global modules are located you can run
npm list -g
I faced the same issue just install the package globally and save at the end.
Like:
npm install -g <package> --save
Even the above doesn't work then use -f / --force at the end to force install.

Do ESLint on a console to check if all files of a project are fine

I just installed ESLint and created a package.json for my project (which is an meteor project).
npm install -g eslint
Now I would like to test all my *.js-files in my project folder. How do I do that?
I tried to do
cd project
eslint -c package.json *.js
But nothing is happening.
At the end I want to do a test, if all files are ok, so I can do a merge / deploy or what so ever.
eslint app-directory/
The -c lets you define a config file, though the package.json won't serve as a valid eslint config.
This is a example eslint conifg: https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/es6.js
You just can create a .eslintrc file from where you execute your eslint command and it will use it as a default config (without you specifying it via -c)

Categories

Resources