# 2.8 图解 npm scripts

> 原文地址： <https://juejin.cn/post/6991347082552573965>

本文将通过图解的方式更加直观的说明其工作流，涉及到项目构建、代码开发、分支管理、自动化测试、持续集成、项目部署、性能等相关命令、工作流程、依赖文件，耐心读完，相信会对您有所帮助。

## 文件构建

### npm run i18n

执行 `node build/bin/i18n.js`，基于 `examples/i18n/page.json` 各页面及国际化配置、 `examples/pages/template` 目录下的所有模版文件，在目录`examples/pages/{lang}`下生成 `zh-CN`、`en-US`、`es`、`fr-FR` 等四种语言的网站.vue 文件。

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f5bb1ddd3454a9b9829a58c32e4f358~tplv-k3u1fbpfcp-watermark.image)

### npm run build:file

执行命令后，并行执行多个任务生成文件

执行 `node build/bin/iconInit.js` ，使用  `postcss`  解析  `packages/theme-chalk/src/icon.scss`，提取所有  `icon`  名字生成  `examples/icon.json`  图标集合文件。 `icon.json`  在官网入口文件`examples\entry.js`  中导入，挂载到  `Vue.prototype`。 用于`Icon图标`文档页生成所有的图标集合 。

执行 `node build/bin/build-entry.js`，基于组件清单文件`components.json`结合字符串模版库`json-templater/string`自动生成 `src/index.js` 组件库入口文件。

执行 `node build/bin/i18n.js` 生成官网的多语言网站文件,详见命令 `npm run i18n` 介绍。

执行 `node build/bin/version.js` 获取`package.json`中 `version`版本号， 生成 `examples/version.json`项目版本列表信息，用于网站版头部导航版本切换。

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e6e923a8cf04e2f8620a433b670602c~tplv-k3u1fbpfcp-watermark.image)

### npm run build:theme

用于项目的主题和样式生成。

#### 1️⃣ 生成入口文件

`node build/bin/gen-cssfile` 找到 `components.json`， 获取组件列表，找到`packages/theme-chalk/src`目录下对应的各组件的 `component-name.scss` 文件，以`@import "./component-name.scss"`的形式，写入`packages/theme-chalk/index.scss`文件-样式总入口文件。若是组件对应的样式不存在，会自动创建遗漏的样式文件。

#### 2️⃣ 构建主题

`gulp build --gulpfile packages/theme-chalk/gulpfile.js` 会执行 `gulpfile.js` 定义两个任务(task):

* 将`packages/theme-chalk/src`目录下的 scss 文件转换成 css 文件，经过浏览器兼容、压缩处理，输出至`packages/theme-chalk/src/lib`目录下;
* 将`packages/theme-chalk/src/fonts`目录下的字体图标文件压缩处理，输出至 `packages/theme-chalk/src/lib/fonts` 目录下。

#### 3️⃣ 拷贝至 lib/theme-chalk 下

通过`cp-cli`，将`packages/theme-chalk/src/lib`目录下文件拷贝至`lib/theme-chalk`目录下。

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aea93defb9214cc8ab39365357569e77~tplv-k3u1fbpfcp-watermark.image)

### npm run build:utils

把 `src` 目录下除了 `src/index.js`文件外的其他文件通过 `babel` 转译后，输出至 `lib` 文件夹下。

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/946a24996bfa4429814393631ffec6c0~tplv-k3u1fbpfcp-watermark.image)

### npm run build:umd

执行 `node build/bin/build-locale.js` ,遍历 `src/locale/lang` 目录下所有 JS 文件，通过 `babel` 转译成 `umd` 格式，输出至 `lib/umd/locale` 目录下。

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2449e93c607c4ade8169aa26a7613b9b~tplv-k3u1fbpfcp-watermark.image)

## 开发模式

### npm run dev

首先，执行命令`npm run bootstrap` 安装项目依赖， 初始化开发环境。\
其次，执行命令`npm run build:file` 构建网站相关文件，详见上文命令介绍。\
最后，运行`webpack-dev-server` 提供一个本地服务(serve) ，编译运行项目网站(打包规则配置 `build/webpack.demo.js`, 模式是`development`，入口文件是`examples/entry.js`);同时执行 `node build/bin/template.js` 文件启动`chokidar`监听 `examples/pages/template` 目录下模板文件，若内容发生变化，执行命令 `npm run i18n` 重新生成网站文件。

`webpack-dev-server` 具有 `live reloading` 功能,网站文件变更会重新编译加载。

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36d4daea6355436aafbf5781e374b38d~tplv-k3u1fbpfcp-watermark.image)

### npm run dev:play

首先，执行命令`npm run build:file` 构建网站相关文件，详见上文命令介绍。\
其次，运行`webpack-dev-server` 提供一个本地服务(serve) ，编译运行项目网站(打包规则配置 `build/webpack.demo.js`)。

命令中设置环境变量 `NODE_ENV=development PLAY_ENV=true`,打包入口文件为`examples/play.js`, 该文件引用 `examples/play/index.vue`, 用于组件库功能展示。

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e2b0a7ac895040118e7c5a4f25c35a9e~tplv-k3u1fbpfcp-watermark.image)

### npm run dev:extension

chorme 插件项目开发调试 ,首先 `rimraf examples/extension/dist` 清除项目上次打包构建内容，然后使用 `webpack` 打包构建项目，配置文件`build/webpack.extension.js`, 入口文件为`examples/extension/src/background.js`和`examples/extension/src/entry.js`。使用 `watch` 模式,若开发中文件发生变化，则重新打包.

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/891751a16bd241fb8041c03beafd8fac~tplv-k3u1fbpfcp-watermark.image)

## 项目构建

### npm run deploy:extension

与命令`npm run dev:extension`相似，使用同一打包配置文件，相同的入口文件。不同之处基于 `production` 模式对应规则进行打包,没有使用 `watch` 模式。

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b2c189210af40d7a21485ce345776ee~tplv-k3u1fbpfcp-watermark.image)

### npm run deploy:build

首先，执行命令`npm run build:file` 构建网站相关文件，详见上文命令介绍。\
其次，执行`webpack --config build/webpack.demo.js` 基于 production 模式，打包生成内容输出至 examples/element-ui/目录下。 最后将项目域名`element.eleme.io`写入`examples/element-ui/CNAME` 文件中 。

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed698989f828457eab000cb36a227200~tplv-k3u1fbpfcp-watermark.image)

### npm run dist

* 执行命令`npm run clean`,清除打包/测试生成的目录及文件;
* 执行命令`npm run build:file`,详见上文;
* 执行命令`npm run lint`,详见上文;
* 执行打包`webpack --config build/webpack.conf.js`,入口文件 `src/index.js` 以 `umd` 格式输出到 `lib/index.js`;
* 执行打包`webpack --config build/webpack.common.js`,入口文件 `src/index.js` 以`commonjs2`格式输出到 `lib/element-ui.common.js`;
* 执行打包`webpack --config build/webpack.component.js`,入口文件 `components.json`,将`packages`目录下的组件，以`commonjs2`格式分别输出到`lib`目录,用于按需引入;
* 执行命令`npm run build:utils` ,详见上文;
* 执行命令`npm run build:umd` ,详见上文;
* 执行命令`npm run build:theme`,详见上文。

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c566919392d249c8962e6b50d17e4610~tplv-k3u1fbpfcp-watermark.image)

### npm run pub

* 执行命令 npm run bootstrap,安装依赖环境;
* 运行 shell 脚本 sh build/git-release.sh ，检查代码 dev 分支是否存在冲突(No conflicts);
* 运行 shell 脚本 sh build/release.sh,合并 dev 分支到 master 分支、更新版本号、发布主题、push 代码到远程仓库、发布组件库至 NPM;
* 执行文件 node build/bin/gen-indices.js,提供 algoliasearch 搜索功能，需要把 examples/docs 目录下 .md 文件内容格式化后上传 algolia。

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad36334759274774a818281195ca2dc2~tplv-k3u1fbpfcp-watermark.image)+

## make 命令

`Makefile` 文件描述了项目的构建规则，它用来自动化构建项目。一旦写编写好 Makefile 文件，只需要一个 make 命令(也可直接执行对应 npm script 命令)，整个工程就开始自动构建。 输入`make target`  命令后，找到  `target`  对应的  `commond` 执行。

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b10fe8bd9ce7475bbc46575d7f631c69~tplv-k3u1fbpfcp-watermark.image)

## 关联阅读

点击以下链接，可以快速查看本系列其他文章：\
[专栏/Element 2.X 源码学习](https://juejin.cn/column/6961321064110489631)

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

1️⃣ [源码剖析之工程化：项目概览、package.json、npm script](https://juejin.cn/post/6969258163136626725)\
2️⃣ [源码剖析之工程化：项目构建、MD 解析](https://juejin.cn/post/6969933702759940133)\
3️⃣ [源码剖析之工程化：打包配置](https://juejin.cn/post/6970691644114862111/)\
4️⃣ [源码剖析之工程化：发布部署、持续集成](https://juejin.cn/post/6971054455139598366/)\
5️⃣ [源码剖析之工程化：主题构建、自动化测试、代码质量检查、类型声明](https://juejin.cn/post/6971434343516340238)\
6️⃣ [源码剖析之工程化：项目网站](https://juejin.cn/post/6972180649625157645)\
7️⃣ [源码剖析之工程化：命令之图解](https://juejin.cn/post/6991347082552573965)