2.8 图解 npm scripts
最后更新于
最后更新于
本文将通过图解的方式更加直观的说明其工作流，涉及到项目构建、代码开发、分支管理、自动化测试、持续集成、项目部署、性能等相关命令、工作流程、依赖文件，耐心读完，相信会对您有所帮助。
执行 node build/bin/i18n.js，基于 examples/i18n/page.json 各页面及国际化配置、 examples/pages/template 目录下的所有模版文件，在目录examples/pages/{lang}下生成 zh-CN、en-US、es、fr-FR 等四种语言的网站.vue 文件。
执行命令后，并行执行多个任务生成文件
执行 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项目版本列表信息，用于网站版头部导航版本切换。
用于项目的主题和样式生成。
node build/bin/gen-cssfile 找到 components.json， 获取组件列表，找到packages/theme-chalk/src目录下对应的各组件的 component-name.scss 文件，以@import "./component-name.scss"的形式，写入packages/theme-chalk/index.scss文件-样式总入口文件。若是组件对应的样式不存在，会自动创建遗漏的样式文件。
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 目录下。
通过cp-cli，将packages/theme-chalk/src/lib目录下文件拷贝至lib/theme-chalk目录下。
把 src 目录下除了 src/index.js文件外的其他文件通过 babel 转译后，输出至 lib 文件夹下。
执行 node build/bin/build-locale.js ,遍历 src/locale/lang 目录下所有 JS 文件，通过 babel 转译成 umd 格式，输出至 lib/umd/locale 目录下。
首先，执行命令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 功能,网站文件变更会重新编译加载。
首先，执行命令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, 用于组件库功能展示。
chorme 插件项目开发调试 ,首先 rimraf examples/extension/dist 清除项目上次打包构建内容，然后使用 webpack 打包构建项目，配置文件build/webpack.extension.js, 入口文件为examples/extension/src/background.js和examples/extension/src/entry.js。使用 watch 模式,若开发中文件发生变化，则重新打包.
与命令npm run dev:extension相似，使用同一打包配置文件，相同的入口文件。不同之处基于 production 模式对应规则进行打包,没有使用 watch 模式。
首先，执行命令npm run build:file 构建网站相关文件，详见上文命令介绍。
其次，执行webpack --config build/webpack.demo.js 基于 production 模式，打包生成内容输出至 examples/element-ui/目录下。 最后将项目域名element.eleme.io写入examples/element-ui/CNAME 文件中 。
执行命令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,详见上文。
执行命令 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。
Makefile 文件描述了项目的构建规则，它用来自动化构建项目。一旦写编写好 Makefile 文件，只需要一个 make 命令(也可直接执行对应 npm script 命令)，整个工程就开始自动构建。 输入make target 命令后，找到 target 对应的 commond 执行。
点击以下链接，可以快速查看本系列其他文章： 专栏/Element 2.X 源码学习
👇 项目工程化系列文章链接如下，推荐按照顺序阅读文章 👇。
1️⃣ 源码剖析之工程化：项目概览、package.json、npm script 2️⃣ 源码剖析之工程化：项目构建、MD 解析 3️⃣ 源码剖析之工程化：打包配置 4️⃣ 源码剖析之工程化：发布部署、持续集成 5️⃣ 源码剖析之工程化：主题构建、自动化测试、代码质量检查、类型声明 6️⃣ 源码剖析之工程化：项目网站 7️⃣ 源码剖析之工程化：命令之图解
+