I am new to npm build tools. I want to bundle the compiled typescript files as soon as there is a change in typescript files and run lite-server concurrently. To achieve that I have written following npm build script -
"build": "tsc",
"bundle": "browserify -s main app/goc-common/common.module.js > dist/bundle.js",
"build_dev": "npm run build && npm run bundle && concurrently \"tsc -w && npm run bundle\" \"lite-server\"",
However this doesn't seems to work, it just compiles the files and refresh the browser, donot bundle the files again.
You should use watchify to continue watching tsc's output files for changes:
"build": "tsc",
"bundle": "watchify -s main app/goc-common/common.module.js -o dist/bundle.js",
"build_dev": "npm run build && npm run bundle && concurrently \"tsc -w && npm run bundle\" \"lite-server\""
As you've noticed, browserify doesn't watch; it just runs once and then it's done. watchify's usage is identical to browserify's, except that the -o option is mandatory.
Related
I would like to conditionally run a script based on if a flag is passed to the script yes or no. Consider the following:
"scripts": {
"clean": "rm -rf ./dist",
"build": "npm run clean && npm run build:esm && npm run build:cjs && if(--css) npm run build:css",
"build:css": "sass $INIT_CWD/src/scss/:dist/css && postcss dist/css/*.css --use autoprefixer -d dist/css",
"build:esm": "tsc -p ./config/tsconfig.esm.json && mv dist/js/esm/index.js dist/js/esm/index.mjs",
"build:cjs": "tsc -p ./config/tsconfig.cjs.json",
"prepack": "npm run build"
},
After the build command, at the very end, if the flag --css was given I want to run build:css as well. Currently, I've put an example placeholder that obviously does not work. But how would I achieve this? Is it even possible?
I am trying to change the {variable} part in my custom-defined npm run deploy script
"scripts":{
"deploy": "npm run build && scp -r ./public example#192.200.0.11:/home/{DIRECTORY}/index.js",
}
I want to run it like npm run deploy --DIRECTORY:project99
You can pass arguments to npm run as Environment variable. See Npm Docs
"scripts": {
"deploy": "npm run build && scp -r ./public example#192.200.0.11:/home/${NPM_CONFIG_DIRECTORY}/index.js"
},
This should work
npm run deploy --DIRECTORY=project99
I am using Cypress and I have the following scripts:
"merge:reports": "mochawesome-merge mochawesome-report/*.json > cypress-combined-report.json",
"create:html:report": "npm run merge:reports && marge --reportDir final-report cypress-combined-report.json",
"delete:reportFolder": "if exist mochawesome-report rmdir /Q /S mochawesome-report && if exist final-report rmdir /Q /S final-report",
"start": "npm run delete:reportFolder && npx cypress run --browser chrome && npm run merge:reports && `enter code here`npm run create:html:report"
What I want is all those scripts running sequentially but I think there is something I am missing here as I am not that familiar with npm and npx as when I trigger this script only it is passing:
npx cypress run --browser chrome
But when I try to execute the script with all the 4 scripts I am getting an error which I think is due to having a npx script:
npm run start
Would be glad for any suggestions or advices where I am wrong, thanks!
If it is unintentional I could see enter code here written for start, please remove that and try running afterwards.
Delete the node_modules folder and package-lock.json files. Then run npm i to install all the dependencies again and then again try running npm run start
Or Remove npx from the cypress run:
"start": "npm run delete:reportFolder && cypress run --browser chrome && npm run merge:reports && npm run create:html:report"
I have a NPM package with TypeScript based React components. When the package is installed, I would like to run a script that essentially runs tsc to compile the TS files, then delete the src folder when done.
// Excerpt from package.json
"scripts": {
"build": "rm -rf ./dist && tsc",
"install": "tsc",
"postinstall": "rm -rf ./src tsconfig.json"
},
However, I noticed that the install hook always runs, whether you're running npm install git+ssh://git#github.com:sparkbuzz/react-components.git but also when you run npm install from within the package (during development for example)
Is there a way to ensure the install script is only executed when the NPM package is remotely installed?
I am following this tutorial:
https://css-tricks.com/why-npm-scripts/
Really found it useful. But I added in the script for browser-sync and it never calls to my index.html file that is inside src and dist folders. From my root I have the following package.json script portion:
"scripts": {
"scss": "node-sass --output-style compressed -o dist/css src",
"autoprefixer": "postcss -u autoprefixer -r dist/css/*",
"lint": "eslint src/js",
"uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js && uglifyjs src/js/*.js -m -c -o dist/js/app.min.js",
"imagemin": "imagemin src/images dist/images -p",
"serve": "browser-sync start --files 'dist/styles/*.css, dist/js/*.js'",
"build:css": "npm run scss && npm run autoprefixer",
"build:js": "npm run lint && npm run uglify",
"build:all": "npm run build:css && npm run build:js && npm run build:imagemin",
"watch:css": "onchange 'src/*.scss' -- npm run build:css",
"watch:js": "onchange 'src/js/*.js' -- npm run build:js",
"watch:all": "parallelshell 'npm run serve' 'npm run watch:css' 'npm run watch:js'"
},
Can someone explain to me how it knows to run the index file? I know it builds a server out of the root folder, but my package.json is not inside the dist folder?
I found it in the documentation.
"serve": "browser-sync start --server --files 'dist/*' --startPath 'dist'"
startPath allowed me to tell it what folder to use as the root.