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
Related
I have made an npm package called awesome-react-gamepads and updated the version several times (currently 0.1.2). This is fine and if you use npm you get the latest version however cdn's like jsdelvr do not have even close to the latest version as seen here https://www.jsdelivr.com/package/npm/awesome-react-gamepads. Is there something I have to specify in my config to force this? I can provide more code upon request I just don't know where the issue is. In my package.json I have the following scripts:
"scripts": {
"format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
"lint": "tslint -p tsconfig.json",
"test": "jest --config jestconfig.json",
"compile": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && tsc -p tsconfig-umd.json",
"prepublish": "npm run compile"
},
I have two versions of my application, for one I set --extended, and for the other not, like this
"scripts": {
"build": "webpack --mode production",
"extended": "webpack --mode production --extended",
// ...
}
Now, in my webpack, I access the extended like this
module.exports = (_env,argv)=> {
argv.extended
}
I am trying to improve this in a cross platform way to do something like
"scripts": {
"build": "webpack --mode production",
"extended": "--extended npm run build"
}
as to run the build script from extended but still access the --extended variable.
I there a way to achieve this? Thank you
I read this whole question How to set environment variables from within package.json but can't find a way
Change the scripts section of your package.json to the following:
"scripts": {
"build": "webpack --mode production",
"extended": "npm run build -- --extended"
}
Explanation:
As stated in the npm-run-script documentation which can be found here:
... The special option -- is used by getopt to delimit the end of the options. npm will pass all the arguments after the -- directly to your script:
So, essentially when you run the following command via your CLI:
$ npm run extended
npm invokes the extended script, which then runs the build script and passes the --extended argument to the end of it (i.e. it passes --extended to the end of the build script).
Is there another way?
Yes, you could also consider simplifying the scripts section of your package.json further by deleting your extended script completely.
For instance:
"scripts": {
"build": "webpack --mode production"
}
Then you can do either of the following:
Run the following command via your CLI:
$ npm run build
This will to invoke your build script without the --extended argument/option.
Or run the following command via your CLI instead:
$ npm run build -- --extended
This will invoke your build script with the --extended argument/option.
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
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"
}
}