包管理工具与配置项

本节目标：理解“包管理工具与配置项”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。 npm 与 package.json ==npm== ==是== ==Node Package Manager== ==的简称，顾名思义，它是== ==node== ==的包管理工具，也是目前世界上最大的开源库生态系统。官方地址为：====www.npmjs.com/====，你可以在里面找到数以万计的开源包。== ==使用== ==npm== ==包下载量统计工具，比如== ==npm-start====，我们可以查看相应包在一定时间范围内的下载量数据，下面是== ==vue-cli== ==和== ==@vue/cli== ==的下载量趋势：==

2. 常用命令# ==生成== ==package.json== ==文件（需要手动选择配置）========npm init====== # ==生成== ==package.json== ==文件（使用默认配置）========npm init -y====== # ==一键安装== ==package.json== ==下的依赖包========npm i====== # ==在项目中安装包名为== ==xxx== ==的依赖包（配置在== ==dependencies== ==下）========npm i xxx====== # ==在项目中安装包名为== ==xxx== ==的依赖包（配置在== ==dependencies== ==下）========npm i xxx --save====== # ==在项目中安装包名为== ==xxx== ==的依赖包（配置在== ==devDependencies== ==下）========npm i xxx --save-dev====== # ==全局安装包名为== ==xxx== ==的依赖包========npm i -g xxx====== # ==运行== ==package.json== ==中== ==scripts== ==下的命令========npm run xxx====== ==比较陌生但实用的有：== # ==打开== ==xxx== ==包的主页========npm home xxx====== # ==打开== ==xxx== ==包的代码仓库========npm repo xxx====== # ==将当前模块发布到== ==npmjs.com====，需要先登录========npm publish====== yarn ==它是由== ==facebook== ==推出并开源的包管理工具，具有速度快，安全性高，可靠性强等主要优势，它的常用命令如下：== # ==生成== ==package.json== ==文件（需要手动选择配置）========yarn init====== # ==生成== ==package.json== ==文件（使用默认配置）========yarn init -y====== # ==一键安装== ==package.json== ==下的依赖包========yarn====== # ==在项目中安装包名为== ==xxx== ==的依赖包（配置在== ==dependencies== ==下）====,====同时== ==yarn.lock== ==也会被更新========yarn add xxx====== # ==在项目中安装包名为== ==xxx== ==的依赖包（配置在配置在== ==devDependencies== ==下）====,====同时== ==yarn.lock== ==也会被更新========yarn add xxx --dev====== # ==全局安装包名为== ==xxx== ==的依========yarn global add xxx====== # ==运行== ==package.json== ==中== ==scripts== ==下的命令========yarn xxx====== ==比较陌生但实用的有：== # ==列出== ==xxx== ==包的版本信息========yarn outdated xxx====== # ==验证当前项目== ==package.json== ==里的依赖版本和== ==yarn== ==的== ==lock== ==文件是否匹配========yarn check====== # ==将当前模块发布到== ==npmjs.com====，需要先登录========yarn publish====== ==以上便是== ==npm== ==与== ==yarn== ==包管理工具的常用及实用命令，需要注意的是，本小册的讲解将会优先使用== ==yarn== ==命令进行包的管理和安装。== package.json****中的第三方插件配置 ==如====browserslist====便是第三方插件配置，该配置的主要作用是用于在不同的前端工具之间共享目标浏览器和== ==Node.js== ==的版本：== =="browserslist"====: [====== =="> 1%"====,== ==//== ==表示包含所有使用率== ==> 1%== ==的浏览器====== =="last 2 versions"====,== ==//== ==表示包含浏览器最新的两个版本====== =="not ie <= 8"== ==//== ==表示不包含== ==ie8== ==及以下版本========]====== ==比如像== ==autoprefixer== ==这样的插件需要把你写的== ==css== ==样式适配不同的浏览器，那么这里要针对哪些浏览器呢，就是上面配置中所包含的。== ==而如果写在== ==autoprefixer== ==的配置中，那么会存在一个问题，万一其他第三方插件也需要浏览器的包含范围用于实现其特定的功能，那么就又得在其配置中设置一遍，这样就无法得以共用。所以在== ==package.json== ==中配置== ==browserslist== ==的属性使得所有工具都会自动找到目标浏览器。== ==当然，你也可以单独写在== ==.browserslistrc== ==的文件中：== ==# Browsers that we support== ==== ==> 1%========last 2 versions========not ie <= 8====== ==至于它是如何去衡量浏览器的使用率和版本的，数据都是来源于== ==Can I Use====。你也可以访问== ==browserl.ist/== ==去搜索配置项所包含的浏览器列表，比如搜索== ==last 2 versions== ==会得到你想要的结果，或者在项目终端运行如下命令查看：== ==npx browserslist====== ==除了上述插件的配置，项目中常用的插件还有：====babel====、====postcss== ==等，有兴趣的同学可以访问其官网进行了解。== > 来自

 <https://juejin.im/book/5b23a5aef265da59716fda09/section/5b275a59e51d4558c0441dc0>