1、简述:
当前很多前端项目和nodejs项目的根目录下都有一个 package.json文件,该文件中定义了当前项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据 ) 。package.json文件就是一个JSON对象,该对象的每一个成员就是当前项目的一项设置。如下package.json文件:
{
"name": "Hello World", // 项目名称
"version": "1.4.24", // 项目版本号
"description": "Hello World",
"main": "index.js",
"scripts": {
"server": "node server.js",
"start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js --inline --colors",
"build_pro": "cross-env NODE_ENV=production webpack --config webpack.config.js"
},
"keywords": [
"Hello World"
],
"license": "ISC",
"devDependencies": {
"express": "^4.16.3",
"file-loader": "^1.1.11",
"font-awesome-webpack": "0.0.5-beta.2",
"html-webpack-plugin": "^2.30.1",
"jquery": "^3.2.1"
},
"dependencies": {
"antd": "^3.3.3",
"axios": "^0.17.0",
"bundle-loader": "^0.5.5",
"css-loader": "^0.23.1"
}
}
2、创建
package.json可手动自定义创建,也可以执行npm init 命令生成
npm init 这个命令采用互动方式,要求用户回答一些问题,然后在当前目录生成一个基本的package.json文件。所有问题之中,只有项目名称(name)和项目版本(version)是必填的,其他都是选填的。
3、scripts配置项
scripts指定了运行脚本的npm命令行缩写,比如start指定了运行npm run start时,所要执行的命令。
"scripts": {
"server": "node server.js",
"start": "webpack-dev-server --config webpack.config.js --inline --colors",
"build_pro": " webpack --config webpack.config.js"
}
4、dependencies 和 devDependencies的区别
dependencies字段指定了项目运行所依赖的模块。
devDependencies指定项目开发所需要的模块。
具体用的包应该放哪个配置段呢?举个例子说明下:
比如:你用react框架开发一个程序,开发阶段需要用到webpack来构建你的开发和本地运行环境。所以react一定要放到dependencies里,因为以后程序到生产环境也要用。webpack则是你用来压缩代码,打包等需要的工具,程序实际运行的时候并不需要,所以放到devDependencies里就可以了。
再深入一些,你写程序要用ES6标准,浏览器并不完全支持,所以你要用到babel来转换代码,babel放devDependencies。程序里有用到开源组件,比如你想用antd,antd要放dependencies。
网友评论