江苏龙网

  1. 主页 > 生活百科 > >

Package.json 配置完全解读，充分了解这些配置有助于我们提高开发的效率( 四 )

package


四、脚本配置1. scriptsscripts 是 package.json中内置的脚本入口，是key-value键值对配置，key为可运行的命令，可以通过 npm run 来执行命令 。除了运行基本的scripts命令，还可以结合pre和post完成前置和后续操作 。先来看一组scripts：
"scripts": { "dev": "node index.js",  "predev": "node beforeIndex.js",  "postdev": "node afterIndex.js"}这三个js文件中都有一句console：
// index.jsconsole.log("scripts: index.js")// beforeIndex.jsconsole.log("scripts: before index.js")// afterIndex.jsconsole.log("scripts: after index.js")当我们执行npm run dev命令时，输出结果如下：
scripts: before index.jsscripts: index.jsscripts: after index.js可以看到，三个命令都执行了，执行顺序是predev→dev→postdev 。如果scripts命令存在一定的先后关系，则可以使用这三个配置项，分别配置执行命令 。
通过配置scripts属性，可以定义一些常见的操作命令：
"scripts": {  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",  "start": "npm run dev",  "unit": "jest --config test/unit/jest.conf.js --coverage",  "test": "npm run unit",  "lint": "eslint --ext .js,.vue src test/unit",  "build": "node build/build.js"}这些脚本是命令行应用程序 。可以通过调用 npm run XXX 或 yarn XXX 来运行它们 ， 其中 XXX 是命令的名称 。例如：npm run dev 。我们可以为命令使用任何的名称，脚本也可以是任何操作 。
使用好该字段可以大大的提升开发效率 。
2. configconfig字段用来配置scripts运行时的配置参数，如下所示：
"config": { "port": 3000}如果运行npm run start，则port字段会映射到npm_package_config_port环境变量中：
console.log(process.env.npm_package_config_port) // 3000用户可以通过npm config set foo:port 3001 命令来重写port的值 。
五、文件&目录下面来看看package.json中和文件以及目录相关的属性 。
1. mainmain 字段用来指定加载的入口文件，在 browser 和 Node 环境中都可以使用 。如果我们将项目发布为npm包，那么当使用 require 导入npm包时，返回的就是main字段所列出的文件的module.exports 属性 。如果不指定该字段，默认是项目根目录下的index.js 。如果没找到 ， 就会报错 。
该字段的值是一个字符串：
"main": "./src/index.js",2. browserbrowser字段可以定义 npm 包在 browser 环境下的入口文件 。如果 npm 包只在 web 端使用，并且严禁在 server 端使用，使用 browser 来定义入口文件 。
"browser": "./src/index.js" 3. modulemodule字段可以定义 npm 包的 ESM 规范的入口文件，browser 环境和 node 环境均可使用 。如果 npm 包导出的是 ESM 规范的包，使用 module 来定义入口文件 。
"module": "./src/index.mjs",需要注意 ， *.js 文件是使用 commonJS 规范的语法(require('xxx')) ， *.mjs 是用 ESM 规范的语法(import 'xxx') 。
上面三个的入口入口文件相关的配置是有差别的，特别是在不同的使用场景下 。在Web环境中，如果使用loader加载ESM（ES module），那么这三个配置的加载顺序是browser→module→main，如果使用require加载CommonJS模块，则加载的顺序为main→module→browser 。
Webpack在进行项目构建时，有一个target选项，默认为Web，即构建Web应用 。如果需要编译一些同构项目，如node项目，则只需将webpack.config.js的target选项设置为node进行构建即可 。如果再Node环境中加载CommonJS模块，或者ESM ， 则只有main字段有效 。
4. binbin字段用来指定各个内部命令对应的可执行文件的位置：
"bin": {  "someTool": "./bin/someTool.js"}这里，someTool 命令对应的可执行文件为 bin 目录下的 someTool.js，someTool.js会建立符号链接node_modules/.bin/someTool 。由于node_modules/.bin/目录会在运行时加入系统的PATH变量，因此在运行npm时，就可以不带路径，直接通过命令来调用这些脚本 。因此，下面的写法可以简写：


推荐阅读


上一篇：Python日期时间处理与计算：节省时间，准确计算

下一篇：解决 Java 打印日志吞异常堆栈的问题