I forked this repo here, pretty straightforward. Now I point my project's package.json to use my fork. After I npm install everything looks good except the lib/dist folder is missing. I know npm run build needs to be run to generate those files and could just do that manually, but the Wix version somehow runs the build step on installation of the package. The only difference from the original is that I changed some iOS code. Do official npm packages (meaning ones you can install by name) get the benefit of some extra love after installation? What am I missing?
There's not much code to show, but I'll show the scripts section of the package.json file...
"scripts": {
"build": "rm -rf ./lib/dist && tsc",
"prestart": "npm run build",
"pretest-js": "npm run build",
"pretest-unit-ios": "npm run build",
"pretest-unit-android": "npm run build",
"test": "node scripts/test",
"start": "node ./scripts/start",
"pretest-e2e-ios-release": "npm run build",
"clean": "node ./scripts/clean",
"test-e2e-ios": "node ./scripts/test-e2e --ios",
"test-e2e-ios-release": "node ./scripts/test-e2e --ios --release",
"test-unit-ios": "node ./scripts/test-unit --ios",
"test-unit-android": "node ./scripts/test-unit --android",
"test-js": "node ./scripts/test-js",
"xcode": "open example/ios/NotificationsExampleApp.xcodeproj",
"androidStudio": "open -a /Applications/Android\\ Studio.app ./example/android",
"prerelease": "npm run build",
"release": "node ./scripts/release",
"generate-changelog": "gren changelog",
"docusaurus": "npm start --prefix website"
},
UPDATE: I added a prepare entry to my fork's package.json the dist files were created. I'm still curious as to why that is done automatically for the original repo.
This question has a lot in common with mine, maybe even a dupe. This answer took me a couple reads, but it led me to read the node documentation (gasp!). I inferred that package authors build and publish to npm (which is obvious), but that npm install doesn't actually go to git to grab the files, instead they have a tar from the publishing process. That was the missing part for me. Anyway, if you want to have your own personal package built on install, use prepare.
Related
I am working on angular 7 application. Below are the scripts in my package.json file to build the application
"scripts": {
"build:all": "npm run build:dev & npm run postbuild",
"build:dev": "ng build --extract-css --watch",
"postbuild": "node fileMover.js",
}
I want to run both build:dev and postbuild commands in sequence.
so first command builds the application by updating the dist folder with bundle files. To move the bundle files to separate folders, we have created a fileMover.js node script.
without --watch, build:all script works fine but due to this, we need to manually run the command everytime we make any changes & save through visual studio or other tool. With watch, it never runs the second "postbuild" command.
Is there any alternate to run both scripts (fist with watch) in sequence?
Thanks :)
You could change the & to && as a single & is for running in parallel and double is for one after-the-other, I believe.
scripts": {
"build:all": "npm run build:dev && npm run postbuild",
"build:dev": "ng build --extract-css --watch",
"postbuild": "node fileMover.js",
}
You could also use the 'pre' and 'post' affixes:
scripts": {
"build:dev": "ng build --extract-css --watch",
"build:all": "npm run build:dev",
"postbuild:all": "node fileMover.js",
}
Is there any boiler plate code to use pm2 with webpack watch option for ts files auto hot reload?
pm2 start index.js is helpful to run directly, but how to add multiple tasks before doing it like watch files and auto reload using webpack and pm2 from dist folders?
After much research considering performance, I might add live reload, which is a to-do task – but not a priority as of now.
"scripts": {
"build": "webpack --config webpack.config.js --watch",
"pm2": "pm2 start ./dist/server.js --watch=true",
"postinstall": "npm run build",
"test": "jest --forceExit",
"test-ci": "npm test && cat ./coverage/lcov.info | coveralls",
"start": "supervisor ./dist/server.js",
"server:dev": "concurrently \"npm run build \" \"npm run start\""
}
Create a process.json for pm2 config In the script key you can give a webpack compiler to run. I am not sure if it will run for it watch reload.
how do i to generate the build folder after my package be installed?
i did this:
"scripts": {
"build": "babel ./src --out-dir ./build"
}
But when other user install the package the npm not build.
How can i execute the build command after install?
You should use "postinstall" in scripts.
source: https://docs.npmjs.com/misc/scripts
It's almost certainly best not to have a post-install step at all. What you really want to do is to build the project before it is published, and then publish the built version to NPM (assuming that's what you are trying to do). In that case, you might use a prepublish script:
// package.json
"scripts": {
"build": "babel src -d build",
"prepublish": "npm run build"
}
And make sure the built files are included in your files array:
// package.json
"files": ["build"]
Or that your source files are excluded in your .npmignore:
// .npmignore
/src/
If you really do need a post-install step for some reason, use a postinstall script:
// package.json
"scripts": {
"build": "babel src -d build",
"postinstall": "npm run build"
}
But I can't think of a use-case where this would be a good idea.
"scripts": {
"build": "babel src -d lib",
"start": "node --use_strict ./lib/index.js",
"watch": "nodemon lib/index.js --exec npm run build"
}
Using the command npm run watch results in the following wrong command being run: [nodemon] starting "npm lib/index.js run build"
How would I write a nodemon command that, on reload, transpiles the code using babel and reloads the code?
"scripts": {
"build": "babel src -d lib",
"start": "node --use_strict ./lib/index.js",
"watch": "nodemon --exec \"npm run build && node lib/index.js\" -e js --ignore lib/"
}
Then run npm run watch. After this, nodemon will rebuild the project and then restart the server every time source code(.js files) is modified.
--exec specifies what non-node scripts (also works for node scripts as above node lib/index.js) you want nodemon to execute when there is a file change.
-e specifies what file extensions you want nodemon to watch.
--ignore specifies the files/directories you want nodemon to ignore. This option is essential to solve this problem because if you do not specify to ignore this lib/ folder, nodemon will restart infinitely as the compiled files in lib/ are also .js files.
You could simply run your code with babel-node to avoid explicit transpiling.
$ nodemon lib/index.js --exec babel-node --presets=es2015,stage-2
It seems like this is the recommended way to use nodemon with babel.
Please note, running --exec could have unintended side effects when running your development environment remotely of your localhost
You can have two nodemons, one to transpile and the other to run your code. In package.json you can do something like this:
"scripts": {
"serve": "nodemon --watch dist/ ./dist/index.js",
"build" : "nodemon --watch src/ --exec babel ./src --out-dir ./dist --source-maps --copy-files"
},
There is an option to build files with Babel in "watch" mode, let Nodemon monitor just the "build" folder and restart the app upon changes to the compiled output.
{
"name": "app",
"version": "1.0.0",
"private": true,
"dependencies": {},
"devDependencies": {
"#babel/cli": "^7.6.0",
"#babel/core": "^7.6.0",
"#babel/preset-env": "^7.6.0",
"nodemon": "^1.19.2"
},
"scripts": {
"build": "babel src --out-dir build --source-maps=inline --verbose",
"start": "yarn build --watch & sleep 1 && nodemon --watch build build/index.js"
}
}
This example is taken from GraphQL API Examples repository on GitHub.
"scripts": {
"build": "babel src -d lib",
"start": "nodemon --exec babel-node lib/index.js",
"serve": "npm run build && node lib/index.js"
}
Serve is for production, with npm start what you do is transpile first and then run nodemon.
A better option would be to not use a global install but instead use the package installed locally. This will also help for automation builds that might be setup the same as your local machine per 12 factor app design.
"scripts": {
"watch": "node ./node_modules/nodemon/bin/nodemon.js"
}
I want to be able to execute the command script1 in a project directory that will run node script1.js.
script1.js is a file in the same directory. The command needs to be specific to the project directory, meaning that if I send someone else the project folder, they will be able to run the same command.
So far I've tried adding:
"scripts": {
"script1": "node script1.js"
}
to my package.json file but when I try running script1 I get the following output:
zsh: command not found: script1
Does anyone know the steps necessary to add the script mentioned above to the project folder?
*Note: the command can not be added to the bash profile (cannot be a machine specific command)
Please let me know if you need any clarification.
Custom Scripts
npm run-script <custom_script_name>
or
npm run <custom_script_name>
In your example, you would want to run npm run-script script1 or npm run script1.
See https://docs.npmjs.com/cli/run-script
Lifecycle Scripts
Node also allows you to run custom scripts for certain lifecycle events, like after npm install is run. These can be found here.
For example:
"scripts": {
"postinstall": "electron-rebuild",
},
This would run electron-rebuild after a npm install command.
I have created the following, and it's working on my system. Please try this:
package.json:
{
"name": "test app",
"version": "1.0.0",
"scripts": {
"start": "node script1.js"
}
}
script1.js:
console.log('testing')
From your command line run the following command:
npm start
Additional use case
My package.json file has generally the following scripts, which enable me to watch my files for typescript, sass compilations and running a server as well.
"scripts": {
"start": "concurrently \"sass --watch ./style/sass:./style/css\" \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
}
Steps are below:
In package.json add:
"bin":{
"script1": "bin/script1.js"
}
Create a bin folder in the project directory and add file runScript1.js with the code:
#! /usr/bin/env node
var shell = require("shelljs");
shell.exec("node step1script.js");
Run npm install shelljs in terminal
Run npm link in terminal
From terminal you can now run script1 which will run node script1.js
Reference: http://blog.npmjs.org/post/118810260230/building-a-simple-command-line-tool-with-npm
Lets say in scripts you want to run 2 commands with a single command:
"scripts":{
"start":"any command",
"singleCommandToRunTwoCommand":"some command here && npm start"
}
Now go to your terminal and run there npm run singleCommandToRunTwoCommand.
Suppose I have this line of scripts in my "package.json"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"export_advertisements": "node export.js advertisements",
"export_homedata": "node export.js homedata",
"export_customdata": "node export.js customdata",
"export_rooms": "node export.js rooms"
},
Now to run the script "export_advertisements", I will simply go to the terminal and type
npm run export_advertisements
Example:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"build_c": "ng build --prod && del \"../../server/front-end/*.*\" /s /q & xcopy /s dist \"../../server/front-end\"",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
As you can see, the script "build_c" is building the angular application, then deletes all old files from a directory, then finally copies the result build files.