前端小白Step2-package.json文件详解

前文已讲过

 package.json -------npm的配置文件,主要用于确定当前项目直接依赖的包版本的范围（例如：^1.0.0表示的是大于等于1.0.0小于2.0.0）只依赖package.json管理包会有两个缺点：

    * . 同一份package.json安装的依赖版本可能不同，如果依赖包有小版本更新并且引入了bug会导致重新装包的项目报错。

    * . package.json中声明的只是直接依赖，依赖的依赖无法通过package.json控制。

除了确定依赖的包范围以外，还有哪些功能呢，下面就让我们揭开package.json 的神秘面纱。

• package.json文件的创建

?

1 2 3

npm init  #创建一个package.json文件   npm init -y #跳过所有的问题

• package.json 配置项组成

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

name：项目/模块名称，长度必须小于等于214个字符，不能以"."(点)或者"_"(下划线)开头，不能包含大写字母。此为必须项 version：项目版本。此为必须项 author：项目开发者，它的值是你在https://npmjs.org网站的有效账户名，遵循“账户名<邮件>”的规则，例如：zhangsan zhangsan@163.com。 description：项目描述，是一个字符串。它可以帮助人们在使用npm search时找到这个包。　　 type:描述了程序中所有组件以及变量的类型定义.可选值module/commonjs或者不设置(默认commonjs)，采坑记，当设置为module时无法用require... require is not defined in ES module scope, you can use import instead keywords：项目关键字，是一个字符串数组。它可以帮助人们在使用npm search时找到这个包。 private：是否私有，设置为 true 时，npm 拒绝发布。 license：软件授权条款，让用户知道他们的使用权利和限制。 bugs：bug 提交地址。 contributors：项目贡献者 。 repository：项目仓库地址。 homepage：项目包的官网 URL。 dependencies：生产环境下，项目运行所需依赖。编译后打包 devDependencies：开发环境下，项目所需依赖。编译后不打包 scripts：执行 npm 脚本命令简写，比如 “start”: “react-scripts start”, 执行 npm start 就是运行 “react-scripts start”。其中scripts脚本内任务可以相互依赖，相互依赖的形式可以通过前缀pre/post或者通过xx:a的形式表示，pre和：a均表示在xx 执行之前执行该命令。 bin：内部命令对应的可执行文件的路径。 main：项目默认执行文件，比如 require(‘webpack’)；就会默认加载 lib 目录下的 webpack.js 文件，如果没有设置，则默认加载项目跟目录下的 index.js 文件。 module：是以 ES Module(也就是 ES6)模块化方式进行加载，因为早期没有 ES6 模块化方案时，都是遵循 CommonJS 规范，而 CommonJS 规范的包是以 main 的方式表示入口文件的，为了区分就新增了 module 方式，但是 ES6 模块化方案效率更高，所以会优先查看是否有 module 字段，没有才使用 main 字段。 eslintConfig：EsLint 检查文件配置，自动读取验证。 engines：项目运行的平台。 browserslist：供浏览器使用的版本列表。 style：供浏览器使用时，样式文件所在的位置；样式文件打包工具parcelify，通过它知道样式文件的打包位置。 files：被项目包含的文件名数组。