主要做的事情是按需加载lodash库 将如下的代码 ```javascript import _ from 'lodash' import isArray from 'lodash/isArray' import { toString } from 'lodash'
npm install babel-plugin-lodash-extract主要做的事情是按需加载lodash库
将如下的代码
``javascript
import _ from 'lodash'
import isArray from 'lodash/isArray'
import { toString } from 'lodash'
isArray([])
_.add(1, 2)
toString(1)
_.add(1, 2)
isArray([1])
``
↓↓↓↓↓↓↓↓↓↓↓ 转换成如下的代码javascript
import isArray from 'lodash/isArray';
import toString from 'lodash/toString';
isArray([]);
import add from 'lodash/add';
add(1, 2)
toString(1);
add(1, 2)
isArray([1]);
`
javascript
import _ from 'lodash'
或
import loadsh from 'lodash'
`
这样会把所有的lodash代码都加载进去
导致大概js文件大小会大70kb左右如下代码
`javascript
import _ from 'lodash'_.add(1, 2)
`
结果有71.1kb
`javascript
static/js/vendor.6b317cc799badf6ad864.js 71.1 kB 0 [emitted] vendor
`但是这么写的话
`javascript
import add from 'lodash/add'
add(1, 2)
`发现只有这么大
`javascript
static/js/vendor.d9f1fb9269405aa51217.js 2.24 kB 0 [emitted] vendor
`$3
` javascript
npm i --save-dev babel-plugin-lodash-extract
`#### 示例:
在babel的配置文件里加上
`json
{
"plugins": ["babel-plugin-lodash-extract"],
}
`
这样的配置,这里需要注意是plugins的加载顺序是从后往前的,一般的项目都有添加
transform-runtime插件,那么写法需要这样
`json
{
"plugins": [
"transform-runtime",
"babel-plugin-lodash-extract"
],
}
`
$3
`javascript
npm run test // unit test
npm run debug // development debug
npm run compile // development compile
npm run example // run example
`$3
首先根据babel的插件开发文档
发现所有的babel插件需要按照以下的格式来进行处理代码
`javascript
module.exports = ({ types: t }) => {
return {
visitor: {
// ...some code
},
};
}
`
然后babel会把你的代码解析成AST首先建立一个目录example,里面建两个文件index.js, example.js
下列使用这个代码来进行处理
// example.js的内容
`javascript
const a = 1 + 2;
`
↓↓↓↓↓↓↓↓
解析成
`javascript
const b = 2 - 3;
`
在这个网站https://astexplorer.net进行AST解析
观察一下这个语法树
首先进行变量a的替换
来看一下结果代码
`javascript
module.exports = ({ types: t }) => {
return {
visitor: {
Identifier(path) {
if (path.node.name === 'a') {
path.replaceWith(t.Identifier('b'));
}
},
},
};
}// 在package.json里面加入 "example": "babel --plugins ../example/index.js ./example/example.js"
// 运行 npm run example
// 输出 const b = 1 + 2;
`然后继续解析 1 + 2 -> 2 - 3
`javascript
module.exports = ({ types: t }) => {
return {
visitor: {
Identifier(path) {
...
},
BinaryExpression(path) {
if (path.node.operator === '+') {
const left = t.numericLiteral(2);
const right = t.numericLiteral(3);
path.replaceWith(t.binaryExpression('-', left, right));
}
}
},
};
}
// 输出 const b = 2 - 3;
// 目标完成
`
关于t上面有哪些方法可以根据__babel-types__的文档来进行查阅还有__path__的一些使用方法在babel插件手册里也有部分解释
#### 完整代码
`javascript
module.exports = ({ types: t }) => {
return {
visitor: {
Identifier(path) {
if (path.node.name === 'a') {
path.replaceWith(t.Identifier('b'));
}
},
BinaryExpression(path) {
if (path.node.operator === '+') {
const left = t.numericLiteral(2);
const right = t.numericLiteral(3);
path.replaceWith(t.binaryExpression('-', left, right));
}
}
},
};
}
``#### 没了。