深浅模式

二.包管理工具 ​

前言

主要介绍 npm 包管理器的一些基础知识

1.package.json 文件 ​

注意

区分dependencies依赖和devDependencies依赖

json
{
  "name": "vue3-demo", // 项目/模块名称，长度必须小于等于214个字符，不能以"."(点)或者"_"(下划线)开头，不能包含大写字母
  "version": "0.1.0", // 项目版本
  "author": "zhoubichuan", // 项目开发者，https://npmjs.org账户名，遵循“账户名<邮件>”的规则，例如：zhoubichuan zhoubichuan@icloud.com
  "description": "demo", // 项目描述，是一个字符串。它可以帮助人们在使用npm search时找到这个包
  "keywords": "demo", // 项目关键字，是一个字符串数组。它可以帮助人们在使用npm search时找到这个包
  "private": true, // 是否私有，设置为 true 时，npm 拒绝发布
  "scripts": {
    // 执行 npm 脚本命令简写，比如 “start”: “react-scripts start”, 执行 npm start 就是运行 “react-scripts start”
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    // 生产环境下，项目运行所需依赖
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    // 开发环境下，项目所需依赖
    "@types/chai": "^4.2.11",
    "@types/mocha": "^5.2.4",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-mocha": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "chai": "^4.1.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5"
  }
}

其他一些配置说明

  • license：软件授权条款，让用户知道他们的使用权利和限制。
  • bugs：bug 提交地址。
  • contributors：项目贡献者 。
  • repository：项目仓库地址。
  • homepage：项目包的官网 URL。
  • 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：被项目包含的文件名数组

2.常用命令 ​

bash
npm init                # 生成package.json文件（需要手动配置）
npm init -y             # 生成package.json文件（使用默认配置）
npm i                   # 一键安装package.json下的依赖包
npm i xxx               # 在项目中安装包名为xxx的依赖包（配置在dependences下）
npm i xxx --save        # 在项目中安装包名为xxx的依赖包（配置在dependencies下）
npm i xxx --save-dev    # 在项目中安装包名为xxx的依赖包（配置在devDependencies下）
npm i -g xxx            # 全局安装包名为 xxx的依赖包
npm run xxx             # 运行package.json中scripts下的命令
npm update xxx          # 更新某个包
npm home xxx            # 打开xxx包的主页
npm repo xxx            # 打开xxx包的代码仓库
npm publish             # 将当前模块发布到npmjs.com,需要先登录
npm view xxx            # 查看当前依赖的版本
npm view xxx version    # 查看当前依赖仓库的版本

3.第三方插件配置 ​

browserslist 第三方插件配置，该配置的主要作用是用于在不同的前端工具之间共享目标浏览器和 Node.js 的版本

bash
"browserslist":[
  "> 1%",               # 表示包含使用率 > 1%的浏览器
  "last 2 versions",    # 表示包含浏览器最新的两个版本
  "not ie <= 9"         # 表示不包含 ie8 及以下版本
]

当然，你也可以单独写在.browserslistrc的文件中

bash
> 1%
last 2 versions
not ie <= 8

3.1 autoprefixer ​

autoprefixer这样的插件需要把你写的 css 样式适配不同的浏览器，那么这里要针对那些浏览器呢，即使上面配置中所包含的。

而如果写在 autoprefixer 的配置中，那么会存在一个问题，万一其他第三方插件也需要浏览器的包含范围用于实现其特定的功能，那么就又得在其配置中设置一遍，这样就无法得以共用。所以在 package.json 中配置 browserslist 的属性使得所有工具都会自动找到目标浏览器。

至于它是如何平衡浏览器的使用率和版本的，数据都是来源于 Can I Use。你也可以搜索配置项所包含的浏览器列表，比如搜索last 2 versions 会得到你想要的结果，或者在项目终端运行如下命令查看：

sh
npx browserslist