Package.json learning record
Published in
2 min readJan 12, 2019
For a long time, I have never get it what is going on in package.json. Now it’s time to conquer it.
There is a package.json content :
{“name”: “reactDashBoard”,“version”: “1.0.0”,“description”: “”,“main”: “index.js”,“scripts”: {“build”: “webpack — progress — colors — config webpack.production.config.js”,“start”: “webpack-dev-server — progress — hot — host 0.0.0.0 — colors — content-base ./server/public — history-api-fallback — config ./webpack.config.js”},“dependencies”: {},“devDependencies”: {“babel-core”: “⁶.26.0”,“babel-loader”: “⁷.1.2”,“babel-plugin-import”: “¹.2.1”,“babel-preset-es2015”: “⁶.24.1”,“babel-preset-react”: “⁶.24.1”,“babel-polyfill”: “⁶.26.0”,“eslint”: “⁴.6.0”,“eslint-config-airbnb”: “¹⁵.0.1”,"eslint-loader": "^1.9.0","eslint-plugin-flowtype": "2.34.0","eslint-plugin-import": "^2.3.0","eslint-plugin-jsx-a11y": "^6.0.2","eslint-plugin-react": "^7.0.1","copy-webpack-plugin": "2.x","css-loader": "^0.28.5","extract-text-webpack-plugin": "^3.0.0","file-loader": "^0.11.2","open-browser-webpack-plugin": "0.0.2","style-loader": "^0.18.2","webpack": "^3.5.6","webpack-dev-server": "^2.7.1"},"keywords": ["es6","react"],"license": "MIT"}
- scripts : Run the command in Terminal, set complicated code as a single word. Ex: yarn start(developing), yarn build(deploying)
- - progress -color : Shows which part of code is running right now.
- - content-base : take index.html as the initial page.
- webpack.production.config.js & webpack.production.config.js : execute different webpack config file in separate condition.
- history-api-fallback : for react router browser history.
3. devDependencies
- babel : switch js es6 to es5 let browser understand the code.
- eslint: keep the code in some standard principle, it will let code be more clean and readable.
- file-loader: file like png can be imported as module.
- css- loader: file like css can be imported as module.
Not finished…..To be continued…