• 包管理工具与配置文件package.json


    1,了解工程化管理核心

    1.1 nodejs

    理解:

    前端工程化发展中,nodejs的出现让前端开始了工程化,结束了仅静态页和切图的工作。他为前端提供了一个运行环境,让前端彻底变成了一个单独的工程,可以运行、编译、构建打包等。

    版本管理:

    不同的前端项目可能使用不同的nodejs版本开发,因此nodejs的版本管理,通常使用nvm(https://github.com/nvm-sh/nvm)和n(https://www.npmjs.com/package/n)。

    二者区别是n是一个npm包,他必须要在node环境中才能安装运行,而nvm可以在window和mac下使用;同时多窗口使用n,全局的node版本都会跟着改变,而nvm在不同的终端窗口可以保持不同的版本。因此大部分情况下都是使用nvm来进行版本管理。

    1.2 npm

    理解:

    npm(Node Package Manager)是主要用来进行包管理的工具。以前的项目如果用到一个插件,需要直接复制文件夹到另一个项目,但是npm将插件保存到远程仓库registry,在新项目复用的时候,直接通过npm install下载安装到当前项目的node_modules目录下进行引用。他将包的信息等都存到package.json文件中,同时该配置文件也存了一些关于项目命令等其他信息。

    淘宝镜像源:

    因为npm是从国外服务器下载,因此会有下载慢的问题,因此淘宝团队搭建了一个国内的镜像,每10分钟一同步。而我们开发者就可以设置淘宝镜像源来提高下载速度。

    npm config set registry https://registry.npm.taobao.org

    1.3 yarn

    理解:

    npm包管理工具存在很多问题,比如下载慢,版本管理不严格导致每台机器上的依赖库版本补丁不一致,npm嵌套关系较深等。因此会衍生出很多新的包管理工具,例如yarn。

    yarn的提出主要是为了解决npm中补丁版本不一致的问题,使用yarn.lock文件固定了安装的版本号,且在安装时采用并行安装的方式,提高了依赖包的安装速度。(而后续npm也模仿他加了package-lock.json这一相同功能)

    使用:

    1,下载yarn: npm install -g yarn (可以用yarn -v 检测是否安装成功)

          [设置淘宝镜像:yarn config set registry https://registry.npmmirror.com/ ]

    2,安装依赖: yarn

    3,安装具体依赖包: yarn add 包名

    4,删除具体依赖包: yarn remove 包名

    5,启动项目: yarn serve(比npm少了一个run)

    注意

    yarn与npm不要混合使用,二者尽量只选择一个

    1.4 pnpm

    理解:

    占用磁盘空间更小,下载速度更快支持monorepos(解决了前端项目臃肿和分工合作的问题,支持用一个git仓库管理多个子项目,例如Babel项目也在使用),安装简单(npm i -g pnpm),替换npm和yarn的成本低

    使用

    1,安装pnpm: npm install -g pnpm

         [设置淘宝镜像:pnpm set registry https://registry.npm.taobao.org ]

    2,安装依赖: pnpm install

    3,安装具体依赖包: pnpm add 包名

    4,删除具体依赖包: pnpm remove 包名

    5,启动项目: pnpm run serve

    1.5 依赖包版本号

    版本号理解

    每个依赖包的版本号都是1.2.3的形式,对应的意义为主版本号、次版本号、修订版本号。

    最优版本理解

    默认情况npm install下载的都是最新版本,版本号不是固定的,而是最优版本。最优版本通常在版本号前面多一个 ^ 或者 符号。

    符号^ :兼容某个大版本,下载的包主版本不能变,次版本和修订版本可以随意变

    符号~: 兼容某个次版本,下载包的主版本和次版本不能变,修订版本可以随意变

    示例:

    1. "element-ui": "^2.15.8",
    2. // 版本号可以是2.15.8、2.15.7、2.14.5等等

    特点:

    最优版本就会导致多人开发会出现多个不同的版本,但是就算使用固定版本锁死版本号,但是无法保证依赖包的依赖包还是最优版本。

    2,package.json配置

    必备属性:(只有两个)

    name - 项目名称

    version - 项目版本

    描述信息

    description - 项目描述

    keyword - 关键词

    author - 作者

    contributors - 贡献者(与作者不同,他是一个数组

    homepage - 主页地址

    repository - 仓库地址

    bugs - 项目bug反馈地址

    funding - 资金支持方式和链接

    依赖配置:

    dependencies - 生产环境依赖(他下面的依赖会跟随npm包被自动下载)

    devDependencies - 开发环境依赖(本地开发阶段使用到的,不会被自动下载,例如webpack、eslint、vite、babel、scss-loader等辅助工具包)

        (注:当只开发项目不对外开源时,放在dependencies和devDependencies中是一样的)

    peerDependencies - 同版本依赖(简单理解就是依赖包A依赖了B,依赖包C也依赖了B,而将相同的依赖写在同版本依赖里,可以保证共用同一个版本的依赖,且避免重复安装

    bundledDependencies - 捆绑依赖(使用较少。参数是一个数组)

    engines - 具体环境(node和npm)版本(例如:"engines": { "node": ">=8.10.3 <12.13.0", "npm": ">=6.9.0" })

    脚本配置:

    scripts - 脚本入口

    config - 用来定义scripts运行时的配置参数(例如:"config": { "NODE_ENV": "development" })

    文件&目录:

    main - 指定加载的入口文件(没提供该属性,则默认是根目录下的index.js)

    browser - 定义npm包在browser环境下的入口文件

    module(非官方) - 定义npm包ESM规范的入口文件,可以在browser环境和node环境使用

    types(非官方) - 定义typescript的类声明文件(.d.ts)的路径

    files - 指定哪些包被推送到npm服务中(参数为字符串数组)

    bin - 定义在全局安装时可执行的命令(例如构建脚手架{ "bin": "cli.js" })

    发布配置:

    private - true或false,防止将私有包发到npm仓库

    preferGlobal(非官方) - true或false,为true表示建议你的包适合全局安装,不适合作为项目依赖本地安装

    publishConfig - 发布时的配置项合集(eg:{ tag: '1.0.0', registry: 'http://xxx', access: 'publick' })

    os - 设置npm包在什么系统中使用,在什么系统中禁用(eg:{ "os": ["darwin", "linux"] } // 适用的操作系统     { "os" ["!win32"] } // 禁用的操作系统)

    cpu - 和OS配置类似,更准确的限制用户的安装环境(eg:"cpu" ["x64", "AMD64"] // 适用的cpu)

    license - 指定软件的开源协议

                  MIT - 只要用户在项目副本中包含了版权声明和许可声明,就可以拿代码做任何事情,无需承担任何责任

                  Apache - 类似于 MIT ,同时还包含了贡献者向用户提供专利授权相关的条款

                  GPL - 修改项目代码的用户再次分发源码或二进制代码时,必须公布他的相关修改

    第三方配置(非官方):

    typings - 与main类似,指定typescript的入口文件

    eslintConfig - eslint的配置内容,更推荐配置在.eslintrc文件中

    babel - 指定Babel的配置内容,更推荐配置在.babelrc文件中

    unpkg - 基于CDN的前端包托管服务,用于在浏览器中直接引用和加载 npm 上发布的包

    browserslist - 告知支持哪些浏览器及版本(eg:"browserslist": [ "not ie < 8", "last 2 versions", "> 1%" ])

    3,package.json中的命令

    npm run xx实际是运行scripts中配置的命令。

    多个命令并行顺序执行,使用符号&

    1. "scripts": {
    2. "start": "指令一 & 指令二 & ...",
    3. },

    多个命令串行前面的成功才会执行后面),使用符号&&

    1. "script": {
    2. "start": "指令一 && 指令二 && ...",
    3. },

    4,package-lock.json文件

    概念:

    之前说package.json某个依赖可能不是具体的版本,而package-lock.json则固定了每个依赖的具体版本,和每个包之间的叠层关系。他会在npm install的时候自动生成

    node_modules依赖包的主要组成部分

    version - 依赖包版本号

    resolved - 依赖包下载地址

    intergrity - 表明完整性的hash值

    dev - 该模块是否为顶级模块的依赖,或者是一个的传递依赖关系

    dependencices - 依赖包的依赖包

    requires - 依赖包所需要的所有依赖项

    engines - 具体环境,同package.json一致

    示例:

    1. "node_modules/@achrinza/node-ipc": {
    2. "version": "9.2.2",
    3. "resolved": "https://registry.npmmirror.com/xxc-9.2.2.tgz",
    4. "integrity": "sha512-b90U39dx0cU......4ApNXnE3+Tuo8xxxxx==",
    5. "dev": true,
    6. "dependencies": {
    7. "@node-ipc/js-queue": "2.0.3",
    8. "event-pubsub": "4.3.0",
    9. "js-message": "1.0.7"
    10. },
    11. "engines": {
    12. "node": "8 || 10 || 12 || 14 || 16 || 17"
    13. }
    14. },

  • 相关阅读:
    MQ学习笔记
    通用返回类型定义
    API cop
    【多目标追踪算法】Deepsort追踪实战
    @Autowired与@Resource区别
    并查集快速合并
    JUC并发编程系列详解篇六(死锁的基本概念)
    IIS配置优化
    数仓:爱奇艺数仓平台建设实践
    Qt/C++音视频开发55-加密保存到文件并解密播放
  • 原文地址:https://blog.csdn.net/wjs0406/article/details/133920032