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

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

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

npm run build:utils

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

image.png

npm run build:umd

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

image.png

开发模式

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

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

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

项目构建

npm run deploy:extension

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

image.png

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

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

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+

make 命令

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

image.png

关联阅读

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

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

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

上一页2.7 项目网站下一页3.1 组件概述

最后更新于