webpack4学习系列(一):package.json相关
2019-06-12 本文已影响0人
tracyXia
一、package.json属性说明
name - 包名.
version - 包的版本号。
description - 包的描述。
homepage - 包的官网URL。
author - 包的作者,它的值是你在https://npmjs.org网站的有效账户名,遵循“账户名<邮件>”的规则,例如:zhangsan <zhangsan@163.com>。
contributors - 包的其他贡献者。
dependencies / devDependencies - 生产/开发环境依赖包列表。它们将会被安装在 node_module 目录下。
repository - 包代码的Repo信息,包括type和URL,type可以是git或svn,URL则是包的Repo地址。
main - main 字段指定了程序的主入口文件
keywords - 关键字
scripts - 指定了运行脚本命令的npm命令行缩写。如 npm start、npm run dev、npm run build等
package.json 中添加中文注释会编译出错
二、生成package.json文件
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (node_modules) runoob # 模块名
version: (1.0.0)
description: Node.js 测试模块(www.runoob.com) # 描述
entry point: (index.js)
test command: make test
git repository: https://github.com/runoob/runoob.git # Github 地址
keywords:
author:
license: (ISC)
About to write to ……/node_modules/package.json: # 生成地址
{
"name": "runoob",
"version": "1.0.0",
"description": "Node.js 测试模块(www.runoob.com)",
……
}
Is this ok? (yes) yes
三、安装package.json的依赖文件
通过命令 npm install 或 npm install --save -dev 安装依赖,将所需模块安装到node-modules目录下。
–save-dev表示将安装devDependencies属性里的模块。比如,你写 ES6 代码,如果你想编译成 ES5 发布那么 babel 就是devDependencies。如果你用了jQuery,由于发布之后还是依赖jQuery,所以是dependencies。
源码如下
{
"name": "webpack-app",
"version": "1.0.0",
"description": "webpack app description",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --devtool hot --progress --colors --cate",
"dev1": "webpack --config webpack.config.js --devtool hot --progress --colors --cate",
"build": "webpack --config webpack.config_build.js -p --cate",
"build:watch": "webpack --config webpack.config_build.js -p --watch --cate"
},
"repository": {
"type": "git",
"url": ".."
},
"author": "luckykun",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^6.4.0",
"axios": "^0.16.2",
"babel-cli": "^6.24.1",
"babel-core": "^5.8.38",
"babel-loader": "^5.4.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"better-scroll": "^1.4.0",
"canvas2image": "^1.0.5",
"css-loader": "^0.14.5",
"dom-to-image": "^2.6.0",
"eslint": "^4.7.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.3.0",
"extract-text-webpack-plugin": "~1.0.1",
"jsx-loader": "^0.13.2",
"koa": "^2.3.0",
"koa-body": "^2.3.0",
"koa-router": "^7.2.1",
"less": "^2.7.2",
"less-loader": "^4.1.0",
"mockjs": "^1.0.1-beta3",
"node-libs-browser": "^0.5.2",
"node-sass": "^4.10.0",
"postcss-loader": "^0.11.0",
"qrcode.react": "^0.8.0",
"react-lazyload": "^2.3.0",
"react-router": "^2.7.0",
"redux-devtools": "^3.4.0",
"sass-loader": "^6.0.7",
"style-loader": "^0.12.4",
"url-loader": "^0.5.6",
"vconsole": "^3.2.0",
"webpack": "^1.9.11",
"webpack-dev-server": "^1.15.0"
},
"dependencies": {
"canvas2image": "^1.0.5",
"classnames": "^2.2.5",
"echarts": "^3.8.5",
"echarts-for-react": "^2.0.15-beta.0",
"es6-promise": "^4.1.1",
"fecha": "^2.3.3",
"fetch-jsonp": "^1.1.1",
"file-loader": "^2.0.0",
"html2canvas": "^1.0.0-alpha.12",
"isomorphic-fetch": "^2.2.1",
"material-ui": "^1.0.0-beta.47",
"qrcode.react": "^0.8.0",
"rc-animate": "^2.4.4",
"rc-queue-anim": "^1.2.0",
"rc-tween-one": "^2.2.7",
"react": "^15.6.2",
"react-addons-css-transition-group": "^15.6.2",
"react-copy-to-clipboard": "^5.0.1",
"react-countup": "^4.0.0-alpha.6",
"react-countup-light": "^1.0.4",
"react-dom": "^15.3.1",
"react-fastclick": "^3.0.2",
"react-iscroll": "^1.1.4",
"react-pull-to-refresh": "^1.1.1",
"react-pullload": "^1.0.7",
"react-redux": "^5.0.6",
"react-scroll": "^1.7.10",
"react-swipeable-views": "^0.12.8",
"react-transition-group": "^2.4.0",
"reactjs-iscroll": "^0.3.2",
"redux": "^3.7.2",
"swiper": "^4.4.2",
"whatwg-fetch": "^2.0.3"
}
}
这里的入口文件是webpack配置文件—webpack.config.js