2.2 npm scripts

原文地址： https://juejin.cn/post/6969258163136626725

package.json文件中scripts属性指定了运行脚本命令的 npm 命令行缩写，各个脚本可以互相组合使用，这些脚本覆盖整个项目的生命周期（开发、测试、打包、部署）。

脚本使用注意事项

通配符

由于 npm 脚本就是 Shell 脚本，因为可以使用 Shell 通配符。

"lint": "jshint *.js"
"lint": "jshint **/*.js"

上面代码中，* 表示任意文件名，** 表示任意一层子目录。

执行顺序

如果 npm 脚本里面需要执行多个任务，需要明确它们的执行顺序。如果是 并行执行（即同时的平行执行），使用&符号。

npm run script1.js & npm run script2.js

如果是 继发执行（即只有前一个任务成功，才执行下一个任务），使用 && 符号。

npm run script1.js && npm run script2.js

element 项目定义了很多脚本，按照用途大致分为项目基础、文件构建、项目开发 、发布部署、项目测试等。 脚本命令调用 build 目录中的众多文件,自动完成大量重复性工作,从而减少人为错误、提高效率。下面将逐一分析讲解脚本命令的功能和作用。

关于 /build 目录下文件功能，本篇幅不做讲解，详见后续文章。

项目基础

npm run bootstrap

自动下载项目所需的模块，也就是配置项目所需的运行和开发环境。官方推荐使用 yarn。

"bootstrap": "yarn || npm i"

npm run clean

清除打包/测试生成的目录及文件，主要有lib目录、test\unit\coverage目录（跟测试代码覆盖率有关，详见后文）以及package\theme-chalk\lib目录（跟主题有关，详见后文）。

"clean": "rimraf lib &&
          rimraf packages/*/lib &&
          rimraf test/**/coverage"

需要安装 rimraf 包,用于递归删除目录所有文件。

npm run eslint 代码质量检查

基于 .eslintrc 和 .eslintignore 文件配置，调用 eslint 检测代码规范。--quiet参数允报告错误,禁止报告警告。

"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet"

项目使用自己封装的规则配置 eslint-config-elemefe , 配置使用请参考前文 代码风格检查和格式化配置（ESlint ＆ Prettier）。

{
  "extends": "elemefe"
}

文件构建

npm run i18n

执行 build/bin/i18n.js 基于 examples/i18n/page.json页面多语言配置和 examples/pages/template 目录下的所有模版文件，生成 zh-CN、en-US、es、fr-FR等四种语言的网站.vue文件。

"i18n": "node build/bin/i18n.js",

npm run build:file

该命令主要用于文件的自动化生成，其多个任务是 并行执行。

  • 执行 build/bin/iconInit.js 生成 examples/icon.json 图标集合文件。

  • 执行 build/bin/build-entry.js 生成 src/index.js 组件库入口文件。

  • 执行 build/bin/i18n.js 生成官网的多语言网站文件。

  • 执行 build/bin/version.js 生成 examples/version.json 记录项目版本信息，用于网站版头部导航版本切换。

"build:file": "node build/bin/iconInit.js &
               node build/bin/build-entry.js &
               node build/bin/i18n.js &
               node build/bin/version.js"

npm run build:theme

该命令主要用于项目的主题和样式生成。

  1. 执行 build/bin/gen-cssfile 生成 packages/theme-chalk/index.scss 样式总入口文件。全量引入组件时，引用改样式如下 import 'packages/theme-chalk/src/index.scss'。

  2. 采用 gulp 进行样式构建，将packages/theme-chalk/src下的 scss 文件转换成 css 文件，输出至packages/theme-chalk/src/lib目录下;将packages/theme-chalk/src/fonts下的字体文件压缩处理，输出至 packages/theme-chalk/src/lib/fonts 目录下。

  3. 将构建内容 packages/theme-chalk/lib 拷贝到 lib/theme-chalk 下。前面 sytle 属性配置的路径文件 lib/theme-chalk/index.css 就是这样生成的。

"build:theme": "node build/bin/gen-cssfile &&
                gulp build --gulpfile packages/theme-chalk/gulpfile.js &&
                cp-cli packages/theme-chalk/lib lib/theme-chalk",

需要安装 cp-cli 包,用于文件和文件夹复制,无需担心跨平台问题。

npm run build:utils

该命令作用把 src 目录下除了 src/index.js 入口文件外的其他文件通过 babel 转译后，输出至 lib 文件夹下。

"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",

需要安装 cross-env 包,是一款运行跨平台设置和使用环境变量的脚本，不同平台使用唯一指令，无需担心跨平台问题。

npm run build:umd

该命令作用是执行 build/bin/build-locale.js 通过 babel 处理 src/locale/lang 目录下的文件，生成 umd 格式的文件，输出至 lib/umd/locale 目录下。

"build:umd": "node build/bin/build-locale.js",

项目开发

npm run dev

该命令用于运行组件库的本地开发环境。

  1. 执行命令npm run bootstrap 配置项目所需的运行和开发环境。

  2. 执行命令npm run build:file 详解见前文，构建项目官网相关文件。

  3. webpack-dev-server 提供一个本地服务(serve) 并运行项目网站(打包规则配置 build/webpack.demo.js);同时执行build/bin/template.js文件启动监听examples/pages/template目 录下模板文件，若内容发生变化，则重新生成网站文件。 webpack-dev-server 具有 live reloading 功能,网站内容会实时重新加载。

"dev": "npm run bootstrap &&
        npm run build:file &&
            cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js &
            node build/bin/template.js",

npm run dev:play

该命令用于组件库开发中的功能展示，运行效果如下图。

  1. 执行命令npm run build:file 详解见前文，构建项目官网相关文件。

  2. 由于配置了如下环境变量NODE_ENV=development PLAY_ENV=true,可以在build/webpack.demo.js打包文件中看到入口文件examples/play.js, play.js 引用 examples/play/index.vue, 可以引入组件库任意组件用于功能展示。

"dev:play": "npm run build:file &&
            cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
image.png

发布部署

npm run deploy:build

该命令作用主要是打包构建项目官网内容，为网站部署做准备。

  1. 执行命令npm run build:file 详解见前文，构建项目官网相关文件。

  2. webpack --config build/webpack.demo.js 基于 production 模式，打包生成内容输出至examples/element-ui/目录下。

  3. echo element.eleme.io>>examples/element-ui/CNAME 往examples/element-ui/CNAME文件中写入element.eleme.io 。Github Docs / Managing a custom domain for your GitHub Pages site

"deploy:build": "npm run build:file &&
                 cross-env NODE_ENV=production webpack --config build/webpack.demo.js &&
                 echo element.eleme.io>>examples/element-ui/CNAME"

npm run deploy:extension

该命令作用主要是打包构建主题编辑器的 chorme 插件项目--Element Theme Roller 官方商城地址 。基于 production 模式打包生成内容输出至 examples/extension 目录下。

"deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",

使用该插件可以自定义全局变量和组件的所有设计标记，并实时预览新主题并基于新主题生成完整的样式包，以供直接下载

image.png
image.png

👉 npm run dist ⭐

该命令作用主要是构建组件库。

  1. 执行命令npm run clean,详见上文;

  2. 执行命令npm run build:file,详见上文;

  3. 执行命令npm run lint,详见上文;

  4. 执行打包webpack --config build/webpack.conf.js,入口文件 src/index.js 以 umd 格式输出到 lib/index.js;

  5. 执行打包webpack --config build/webpack.common.js,入口文件 src/index.js 以commonjs2格式输出到 lib/element-ui.common.js;

  6. 执行打包webpack --config build/webpack.component.js,入口文件 components.json,将packages目录下的组件，以commonjs2格式分别输出到lib目录,用于按需引入;

  7. 执行命令npm run build:utils,详见上文;

  8. 执行命令npm run build:umd,详见上文;

  9. 执行命令npm run build:theme,详见上文。

"dist": "npm run clean &&
         npm run build:file &&
         npm run lint &&
         webpack --config build/webpack.conf.js &&
         webpack --config build/webpack.common.js &&
         webpack --config build/webpack.component.js &&
         npm run build:utils &&
         npm run build:umd &&
         npm run build:theme",

👉 npm run pub ⭐

"pub": "npm run bootstrap &&
        sh build/git-release.sh &&
        sh build/release.sh &&
        node build/bin/gen-indices.js",

该命令作用主要是组件库的发布、代码管理。

  1. 执行命令npm run bootstrap,详见上文;

  2. 运行 shell 脚本sh build/git-release.sh，检查代码 dev 分支是否存在冲突(No conflicts);

  3. 运行 shell 脚本sh build/release.sh,合并 dev 分支到 master 分支、更新版本号、发布主题、push 代码到远程仓库、发布组件库至 NPM;

  4. 执行文件node build/bin/gen-indices.js,提供 algoliasearch 搜索功能，需要把 examples/docs 目录下 .md 文件内容格式化后上传 algolia,效果详见下图 👇。

image.png

💁‍♂️ 在 2.15.x 版本，pub 命令移除了最后一条任务指令sh build/deploy-faas.sh，用于站点 https://element.eleme.io 的 faas deploy。

测试

实现项目自动化测试。

  • karma 测试执行过程管理工具(Test Runner)。

  • Mocha 是运行在 Node.js 和浏览器上的功能丰富的 JavaScript 测试框架。

  • Chai 是一个用于 Node.js 和浏览器的 BDD/TDD 断言库，可以与任何 JavaScript 测试框架便捷配对。

  • Sinon.JS 用于对 JavaScript 隔离测试 spy, stub 和 mock。适用于任何单元测试框架。

测试脚本命名方式为 [组件名].spec.js , 统一放在 test/unit/specs/ 目录下。如果测试成功，karma-coverage 会在 test/unit/coverage 文件夹中生成测试覆盖率结果的网页。

npm run test

"test": "npm run lint &&
         npm run build:theme &&
         cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",

该命令用于启动项目测试，设置了参数 --single-run 执行一次测试之后，karma 会自动停掉。

image.png

npm run test:watch

"test:watch": "npm run build:theme &&
               cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"

该命令用于启动项目测试，执行结束后会继续监测文件是否变更，若发生变更，会重新执行一次测试。 image.png

关联阅读

点击以下链接，可以快速查看本系列其他文章： 专栏/Element 2.X 源码学习

👇 项目工程化系列文章链接如下，推荐按照顺序阅读文章 👇。

1️⃣ 源码剖析之工程化：项目概览、package.json、npm script 2️⃣ 源码剖析之工程化：项目构建、MD 解析 3️⃣ 源码剖析之工程化：打包配置 4️⃣ 源码剖析之工程化：发布部署、持续集成 5️⃣ 源码剖析之工程化：主题构建、自动化测试、代码质量检查、类型声明 6️⃣ 源码剖析之工程化：项目网站 7️⃣ 源码剖析之工程化：命令之图解

上一页2.1 项目概览下一页2.3 项目构建

最后更新于