Package.json learning record

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"
}

1. 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…