"env": {
// cross-env BABEL_ENV=utils
"utils": {
"presets": [
[
"env",
{
// 松散模式，更像人手写的ES5代码
"loose": true,
// es6转成commonjs
"modules": "commonjs",
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"] }
}
],
],
"plugins": [
["module-resolver", {
"root": ["element-ui"],
"alias": {
// 类似于Webpack的externals功能
// 将源代码的引入路径更改成目标代码的引入路径
"element-ui/src": "element-ui/lib"
}
}] ] },
"test": {
"plugins": ["istanbul"] }
}
}
utils 文件源代码之间互相引用的路径是
element-ui/src ，转义成目标代码后互相之间的引用路径是
element-ui/lib ，因此需要有类似于Webpack的
externals 的功能去更改目标代码的引用路径，进行Babel转义时插件babel-plugin-module-resolver 可以实现该功能。
npm run build:theme
build:theme 脚本主要用于构建UI组件的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”,
这里主要关注
gulp build --gulpfile packages/theme-chalk/gulpfile.js 脚本，该脚本使用Gulp构建工具构建css样式文件，Glup构建多文件样式会非常简单。最终将当前构建的
packages/theme-chalk/lib 目录下的内容拷贝到
lib/theme-chalk 目录下供外部业务使用：
lib
├── theme-chalk # css 样式文件
│ ├── fonts # icons
│ ├── alert.css # 按需引入的组件样式
│ ├── ... # 按需引入的组件样式
│ └── index.css # 完整引入样式查看
gulpfile.js 文件：
'use strict';const { series, src, dest } = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
function compile() {
return src('./src/*.scss')
// sass转化成css
.pipe(sass.sync())
// Parse CSS and add vendor prefixes to rules by Can I Use
// css浏览器兼容处理
.pipe(autoprefixer({
browsers: ['ie > 9', 'last 2 versions'],
