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"
},
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 am trying to reuse husky for other projects (not just config file), building a lib of sorts that will be used by all other projects.
I cannot understand how and when devinstall and devuninstall scripts are executed. Cannot find any documentation either on npmjs.com.
Can someone help understand when this are getting executed please?
I've been trying to understand that too.
Turns out they do something at publication time that renames the _install script into install.
Here's the script field of the package.json found in the husky folder when installed through npm.
"scripts": {
"build": "del-cli lib && tsc",
"devinstall": "npm run build && npm run _install -- node_modules/husky && node scripts/dev-fix-path",
"devuninstall": "npm run build && npm run preuninstall -- node_modules/husky",
"fix": "npm run lint -- --fix",
"install": "node husky install",
"lint": "tslint 'src/**/*.ts'",
"postpublish": "pinst --disable",
"postversion": "git push && git push --tags",
"prepublishOnly": "npm run test && npm run build && pinst --enable && pkg-ok",
"preuninstall": "node husky uninstall",
"test": "npm run lint && jest",
"version": "jest -u && git add -A src/installer/__tests__/__snapshots__"
}
Although I can't figure where that is done
I'm trying to set up a project which makes use of express and react. And I'm trying to make the best use of React-Slingshot project to benefit from it as much as possible. But the thing is that my project needs to be served (on the server side) by a script which I wrote. That script will use express and possibly socket.io to server the client side.
I think this is a problem if I use projects like React-Slingshot since they come with their own server scripts which support hot reloading and stuff. I'm willing to give up the fancy functionality like hot reloading. But I need to keep the --watch functionality so each time some file is changed, the code is compiled without me restarting the whole server.
Right now, the script section of package.json looks like this:
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"remove-demo": "babel-node tools/removeDemo.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm run start-message",
"start": "concurrently -k -r -s first \"npm run test:watch\" \"npm run open:src\" \"npm run lint:watch\"",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"lint": "esw webpack.config.* src tools --color",
"lint:watch": "npm run lint -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && babel server -d dist --presets es2015,stage-2",
"test": "jest",
"test:CI": "babel-node tools/testCi.js",
"test:cover": "npm run test -- --coverage ",
"test:cover:CI": "npm run test:CI -- --coverage && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
"test:watch": "jest --watch",
"open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
"analyze-bundle": "babel-node ./tools/analyzeBundle.js"
},
This is a modified version of what you can find in React-Slingshot. I've made a change so when I run npm run build, it builds the server code as well and terminates. It used to be like this:
"build": "babel-node tools/build.js && npm run open:dist",
Now, I'm trying to find a way to run my own server (i.e. node temp/server.js) while the rest of the code is compiled based on --watch as for my dev environment.
I believe you need a package like watch also check this video
I am currently using yarn as my package manager, but some people on my team may still use npm. I wrote a few scripts in package.json
"scripts": {
"clear": "rm -Rf app/javascripts/* & rm index.html",
"watch": "yarn clear | NODE_ENV=development webpack -w --env.dev",
"build": "yarn clear && yarn dev && yarn start",
"dev": "yarn clear | NODE_ENV=development webpack --env.dev",
"prod": "yarn clear | NODE_ENV=production webpack --progress --env.prod"
}
If I want to call clear inside of other scripts, I have to either use npm clear or yarn clear. As the script is currently written, someone who doesn't have yarn installed will run into an error.
Is there a way for me to write this package.json so that it will work regardless if someone runs npm build or yarn build, and it will use the package manager of their choosing?
You can use the variable npm_execpath, it will point to the package manager used to run the script.
For example, this will output the version of yarn or npm:
"scripts": {
"version": "$npm_execpath -v",
}
$ npm run version
> 3.10.10
$ yarn run version
> 0.21.3