After using npm test to do linting, it immediately starts to build all 2000 modules, and since it is already previously built, so I press CTRL-C, but only to find that because it got interrupted in the middle, some files are corrupted.
Is there a way to only run the linting without having it build all the modules?
Yes, your lint command is just something user made. If you go into your package.json and look for the 'test' command, you'll see that it calls several other commands including lint and build. Just make it lint only, or create a seperate function called npm lint. Here's an example package.json. As you can see, it has a lint and a test command.
{
"name": "boilerplate",
"version": "0.0.1",
"private": true,
"scripts": {
"start:native": "node node_modules/react-native/local-cli/cli.js start",
"start:web": "react-scripts start",
"lint": "eslint src/**",
"test": "node_modules/.bin/jest --env=jsdom",
"test:watch": "node_modules/.bin/jest --verbose --watchAll --env=jsdom"
}
}
Related
Trying to figure out how can I create a production build with webpack but first run it locally as a last test before deploying it to the server.
I was thinking of creating another command something like npm run build_local for that purpose but can't quite figure out how to do that.
I can see the following in the root package.json and I was thinking of somehow combining dev + build but can't figure out how to do that (or using config otherwise):
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
Any advice on how can I run a production build in localhost with something like npm run build_local command?
EDIT
What I've tried so far is to run (manually) http-server ./dist which seem to run the folder on localhost, but the result in fact deviates from production (and dev) behavior - in my case it first renders everything as expected but as long as I press refresh, it returns 404 not found which is unexpected (on dev and server deployed versions it still renders the login page in this case):
for example if I open localhost:8080, vue redirects me to localhost:8080/login which is expected and works fine. On refresh it gives 404 though.
Ideally I'd expect it to work at least in the same way as dev build on localhost.
Any ideas?
So it was as simple as combining the dev command and providing prod config to it under the root package.json:
"build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
//
Or in the package.json:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
"build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
}
Now I can do npm run build_local which runs production build on localhost
Note: as per this github thread and this doc reference to prevent 404 on refresh also add the following to your webpack.prod.conf.js (anywhere in the file, but for reference you can paste it just before plugins)
devServer: {
contentBase: path.join(__dirname, 'dist'),
historyApiFallback: true, //this line is requried
compress: true,
port: 9000
},
You can now check your production build under the localhost:9000
If anyone knows about any drawbacks give me a comment or post the corrected answer
This is scripts section of my package.json:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"compile-prebuild": "tsc -p prebuild-tsconfig.json --pretty",
"prebuild": "ts-node --project PreBuild/tsconfig.json PreBuild/prebuild.ts",
"testJs": "node test.js",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"extract-i18n": "ng xi18n Paradise --i18n-format=xlf2 --output-path=i18n --i18n-locale=en && ng run Paradise:xliffmerge"
},
The wonderful thing is when I try npm run build or npm run build -- --prod another script (prebuild) is executed:
> npm run build -- --prod
> project#0.1.1 prebuild ...
> ts-node --project PreBuild/tsconfig.json PreBuild/prebuild.ts
Now, if I rename prebuild script to pre-build (in package.json), everything is going to be alright:
> npm run build -- --prod
> project#0.1.1 build ...
> ng build "--prod"
...
Now, if I reverted to back, the problem appears again!
> npm -v
6.7.0
This is "correct", as it is the documented behaviour of npm - see here.
Additionally, arbitrary scripts can be executed by running npm run-script <stage>. Pre and post commands with matching names will be run for those as well (e.g. premyscript, myscript, postmyscript).
Generally, scripts can be prefixed with pre or post to do things before or after a script.
It is best to consider the prefixes pre and post as reserved when choosing npm script names (unless you intend them to always be run before or after the main task, of course).
The pre and post hooks run automatically by npm. If you have prebuild defined in your package.json, npm will run it automatically when you ask it to run build. Same goes for post hook as well.
You can check out the documentation here. https://docs.npmjs.com/misc/scripts
I want to run eslint as a prestart script so if it fails it won't run the build script, but even when the eslint returns "clean" result it still stops the following scripts from running.
So as you can see in the example below, the testing is not running.
I've even tried to replace the order and run the test first, but then the lint script doesn't run.
Any ideas?
"scripts": {
"prestart": "npm run lint:watch && npm run test:watch",
"start": "open:src",
"open:src": "nodemon --watch server --exec babel-node --debug=5858 --inspect server/srcServer.js --delay 2",
"lint": "node_modules/.bin/esw webpack.config.* --cache --max-warnings 0 src server",
"lint:watch": "npm run lint -- --watch",
"test": "mocha --reporter progress server/testSetup.js 'src/**/*.test.js'",
"test:watch": "npm run test -- --watch"
},
Now I know how it feels to be dumb :)
The "watch" in the test and lint caused it to stop since it doesn't exit.
Thank me very much for solving my issue.
I cannot see custom NPM scripts in either WebStorm 2016.3.2 or IntelliJ IDEA 2016.3.2's NPM run/debug configuration. I have selected the proper package.json file.
This is the script section from my package.json file and the run/debug configuration on the screen below. I cannot choose other custom commands, such as clean:dist (there is only clean), e2e, pretest, test:passive, etc. How I can choose these?
"scripts": {
"clean": "npm cache clean && rimraf coverage src/main/resources/static/*",
"clean:dist": "rimraf typings src/main/resources/static/*",
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm install",
"preclean:start": "npm run clean",
"clean:start": "npm start",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"e2e:live": "protractor --elementExplorer",
"lint": "tslint './src/main/frontend/**/*.ts' --force",
"pretest": "rimraf coverage && npm run lint",
"test:passive": "ng test -w false",
"test": "ng test",
"pretest:phantom": "rimraf coverage && npm run lint",
"test:phantom": "ng test -w false --browsers PhantomJS",
"build": "npm run build:dev",
"prebuild:dev": "npm run clean:dist",
"build:dev": "ng build -dev",
"prebuild:prod": "npm run clean:dist",
"build:prod": "ng build -prod",
"server": "npm run server:dev",
"server:dev": "ng serve --p 4200 -pc proxy.json -dev",
"server:prod": "ng serve --p 4200 -pc proxy.json -prod",
"start": "npm run server:dev",
"ncu": "ncu -a",
"ng:upgrade": "ng init -n sqap-ui -sd src/main/frontend --style scss --prefix sqap --routing",
}
If you like to run your custom scripts, select run as command, and then use the dropdown in scripts field to select your script. test command just runs npm test. Hint: you can create run configurations by right-clicking the script in NPM tool window that can be opened using Show npm scripts in package.json right-click menu
I created a react native project, and I want to enable flow for my project.
I have flow-bin installed by
npm install --save flow-bin
However, it returns
missing script: flow
when I run
npm run-script flow
Anyone got any idea? Thanks!
npm run-script flow will not execute the flow command, but will just look into the scripts entry in the package.json file and execute the command under the flow entry (see the documentation for more information). This has the advantage that it will include binaries located in your dependencies (a.k.a. binaries inside the node_modules folder), which is something you usually do not have in your $PATH, avoiding the need to configure that for every project. Make sure that your package.json looks something like this:
//...
"scripts":{
//...
"flow": "flow; test $? -eq 0 -o $? -eq 2"
}
//...
Source: docs
Add "flow": "flow" as a new entry under "scripts" in your package.json file:
...
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow"
},
...
The tutorials I was following seem to skip this step but the Facebook github repo has it: https://facebook.github.io/create-react-app/docs/adding-flow