element-ui 之 package.json 剖析

npm run dist

"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 clean 清空

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

• npm run build:file

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

1. node build/bin/iconInit.js 得到 el-icon 样式文件里的 icon 名称，倒序后输出到 examples/icon.json
   

2. node build/bin/build-entry.js 通过 components.json 的映射关系和json-templater的模版替换，生成 src/index.js

3. node build/bin/i18n.js 将 examples/pages/template 里的 .tpl 后缀作为模版，根据 examples/i18n/page.json 里的替换字符，进行替换，并输出到 examples/pages
   

4. node build/bin/version.js 生成版本文件，提供给 examples/components/header.vue 用于版本切换的选择，跳转到指定版本的 location.href
   

• npm run lint
  –quiet选项用于减少ESLint输出的噪音。当使用此选项时，ESLint将只输出错误和警告，而不会输出其他信息，例如检查的文件数和处理时间

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

• webpack --config build/webpack.conf.js
  1.生成的 lib/index.js 文件给 cdn 用

  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  

  2.其中 publicPath: '/dist/' 当被引用的时候，路径要带上 /dist/
  

• webpack --config build/webpack.common.js
  生成的是全局引入

• webpack --config build/webpack.component.js
  生成的是按需引入

• npm run build:utils

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

  它使用了 Babel 工具链中的 babel 命令，将 src 目录中的 JavaScript 代码编译为 lib 目录中的 ES5 代码，并忽略了 src/index.js 文件。其中，cross-env 是一个跨平台的环境变量设置工具，用于设置 BABEL_ENV 环境变量为 utils

• npm run build:umd

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

   var transform = function(filename, name, cb) {
    require('babel-core').transformFile(resolve(localePath, filename), {
      plugins: [
        'add-module-exports',
        ['transform-es2015-modules-umd', {loose: true}]
      ],
      moduleId: name
    }, cb);
  };
  

  1.src/locale/lang 里的文件被 require('babel-core').transformFile 转换后的文件放在 lib/umd/locale
  2.transform 函数是一个用于将指定文件转换为 UMD 模块格式的函数。具体来说，它使用了 Babel 工具链中的 transformFile 方法，将指定的文件编译为 UMD 模块格式，并在编译过程中使用了 add-module-exports 和 transform-es2015-modules-umd 两个插件。其中，add-module-exports 插件用于将 ES6 模块转换为 CommonJS 模块，并添加 module.exports 属性，以便在 Node.js 等环境中使用。
  

  transform-es2015-modules-umd 插件用于将 ES6 模块转换为 UMD 模块，并添加适当的 UMD 包装器，以便在浏览器等环境中使用。moduleId 选项指定了 UMD 模块的 ID，即模块名称

  

• npm run build:theme

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

  1. node build/bin/gen-cssfile
     检查 packages/theme-chalk/src 里是否有 components.json 对应的 scss 文件，没有的话，生成。并生成 packages/theme-chalk/src/index.scss 里面是所有组件的导入
     

  2. gulp build --gulpfile packages/theme-chalk/gulpfile.js
     将 packages/theme-chalk/src 下的 scss 转换为 css 并压缩，将 font 压缩，后放到 packages/theme-chalk/lib 下面

  3. cp-cli packages/theme-chalk/lib lib/theme-chalk"
     将 packages/theme-chalk/lib 复制一份到 lib/theme-chalk 下面

npm run dev:extension

"dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js",

打包构建主题编辑器的 chorme 插件项目–Element Theme Roller 官方商城地址

npm run pub

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

• sh build/git-release.sh
  检查代码 dev 分支是否存在冲突(No conflicts);
• sh build/release.sh
  合并dev分支到master分支、更新版本号、发布主题、push代码到远程仓库、发布组件库至NPM
• node build/bin/gen-indices.js
  将 examples/docs 里的 .md 内容格式化后，上传到 algolia, 用于云搜索

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 会自动停掉

npm run test:watch

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

若文件变更，重新执行一次测试

参考文章：
Element UI 项目工程化剖析之项目概览、package.json、npm script