Skip to content

Latest commit

 

History

History
129 lines (102 loc) · 6.38 KB

analysis-package.json.md

File metadata and controls

129 lines (102 loc) · 6.38 KB
Raw

逐行分析vue-webpack模板的package.json

package.json中包含了项目的一些基本信息、依赖包等内容。通过package.json，我们可以清楚的了解项目及其中使用的技术栈。下面将逐行分析模板中的package.json，并和npm init --y生成的package.json做对比。想了解package.json中每个字段的详细内容，可以参考官方文档package.json。

第 1 ~ 6 行

这里介绍了项目的一些基本信息：

{
  "name": "vue-webpack",                  //项目名称
  "version": "1.0.0",                     //版本
  "description": "A Vue.js project",      //项目说明
  "author": "geshengming17@gmail.com",    //作者
  "private": true,                        //为true时，npm不会发布这个包

第 7 ~ 12 行

这里介绍了在项目目录下，可执行的npm脚本及对应的具体内容。

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",

    "build": "node build/build.js"
  },

例：执行 $ npm run dev 等同于 $ webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

脚本分析：

  • 执行脚本 $ npm run dev 将会启动webpack-dev-server并传入三个配置--inline 、--progress 、--config build/webpack.dev.conf.js

    • webpack-dev-server：基于node.js、express的服务器，用于 运行开发环境
    • --inline 在包(bundle)中插入处理实时重载的脚本，并且webpack的构建消息将会出现在浏览器控制台
    • --progress 将运行进度实时输出在控制台（终端）中
    • --config build/webpack.dev.conf.js 指定webpack-dev-server的配置文件：build/webpack.dev.conf.js

  • 执行脚本 $ npm start 将会执行 $ npm run dev。结果同上

  • 执行脚本 $ npm run build 将会在node环境中执行 build/build.js

    • build/build.js 负责将项目打包成供生产环境使用的静态资源

由此可见：webpack-dev-server负责开发环境，而build/build.js负责生产环境。关于webpack-dev-server及它的配置文件build/webpack.dev.conf.js、build/build.js将会在以后的章节中详细学习。

第 13 ~ 15 行

这里指定了项目的依赖包和版本，本模板没有选择安装vue-router，所以只有vue：

  "dependencies": {
    "vue": "^2.5.2"
  },

第 16 ~ 49 行

这里指定了项目开发时的依赖包和版本，这些依赖包主要用于项目的构建、打包及开发环境等，通常不用于生产环境。

第 50 ~ 53 行

这里指定项目所需的环境及版本：

  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  • node.js 版本大于等于 4.0.0
  • npm 版本大于等于 3.0.0

第 54 ~ 58 行

这里说明了本项目对浏览器的兼容情况。官方文档browserslist

所有依赖于Browserslist的工具都会在这儿找到对应的配置：

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
  • "> 1%", 兼容符合其他条件且全球市场份额大于1%的浏览器
  • "last 2 versions", 兼容符合其他条件且是最近两个版本内的浏览器
  • "not ie <= 8" 不兼容ie8及以下

总结

通过逐行分析package.json，我们发现package.json就像顺藤摸瓜里的藤，帮助我们从源头探索整个工程。

参考文档

package.json | npm