babel-presets-env 结合一个target选项很好的控制了 编译的范围。但是有时候,不想制定这个一个不太准确的targrt,而希望更精致的配置,参考文档,就得使用 exclude了
比如,不希望编译 箭头函数,就在exclude里加上 "transform-es2015-arrow-functions",
{
"presets": [
[
"env",
{
"modules": false,
"useBuiltIns": false,
"exclude": [
"transform-es2015-arrow-functions",
]
}
]
]
}
但是如果不想编译 async语法呢?
用这个吗 "transform-async-generator-functions"
报错了:
Invariant Violation: Invalid Option: The plugins/built-ins 'transform-async-generator-functions' passed to the 'exclude' option are not
valid. Please check data/[plugin-features|built-in-features].js in babel-preset-env (While processing preset: "D:\\learn\\es6\\node_modules\\babel-preset-env\\lib\\index.js")
顺着报错行去查看源码,发现选项只要不在validIncludesAndExcludes 的,统统报错:
validIncludesAndExcludes 的定义如下:
var validIncludesAndExcludes = [].concat(
Object.keys(_plugins2.default), // "../data/plugins.json"
// "./module-transformations"
Object.keys(_moduleTransformations2.default).map(function(m) {
return _moduleTransformations2.default[m];
}),
Object.keys(_builtIns2.default), // ../data/built-ins.json
_defaultIncludes.defaultWebIncludes // "./default-includes"
);
一共四部分:
一:Object.keys(_plugins2.default), // "../data/plugins.json"
即这些key
二: 模块组织方式相关:
"amd": "transform-es2015-modules-amd",
"commonjs": "transform-es2015-modules-commonjs",
"systemjs": "transform-es2015-modules-systemjs",
"umd": "transform-es2015-modules-umd"
三,一些es6内置模块
["es6.typed.array-buffer", "es6.typed.data-view", "es6.typed.int8-array", "es6.typed.uint8-array", "es6.typed.uint8-clamped-array", "es6.typed.int16-array", "es6.typed.uint16-array", "es6.typed.int32-array", "es6.typed.uint32-array", "es6.typed.float32-array", "es6.typed.float64-array", "es6.map", "es6.set", "es6.weak-map", "es6.weak-set", "es6.reflect.apply", "es6.reflect.construct", "es6.reflect.define-property", "es6.reflect.delete-property", "es6.reflect.get", "es6.reflect.get-own-property-descriptor", "es6.reflect.get-prototype-of", "es6.reflect.has", "es6.reflect.is-extensible", "es6.reflect.own-keys", "es6.reflect.prevent-extensions", "es6.reflect.set", "es6.reflect.set-prototype-of", "es6.promise", "es6.symbol", "es6.object.freeze", "es6.object.seal", "es6.object.prevent-extensions", "es6.object.is-frozen", "es6.object.is-sealed", "es6.object.is-extensible", "es6.object.get-own-property-descriptor", "es6.object.get-prototype-of", "es6.object.keys", "es6.object.get-own-property-names", "es6.object.assign", "es6.object.is", "es6.object.set-prototype-of", "es6.function.name", "es6.string.raw", "es6.string.from-code-point", "es6.string.code-point-at", "es6.string.repeat", "es6.string.starts-with", "es6.string.ends-with", "es6.string.includes", "es6.regexp.flags", "es6.regexp.match", "es6.regexp.replace", "es6.regexp.split", "es6.regexp.search", "es6.array.from", "es6.array.of", "es6.array.copy-within", "es6.array.find", "es6.array.find-index", "es6.array.fill", "es6.array.iterator", "es6.number.is-finite", "es6.number.is-integer", "es6.number.is-safe-integer", "es6.number.is-nan", "es6.number.epsilon", "es6.number.min-safe-integer", "es6.number.max-safe-integer", "es6.math.acosh", "es6.math.asinh", "es6.math.atanh", "es6.math.cbrt", "es6.math.clz32", "es6.math.cosh", "es6.math.expm1", "es6.math.fround", "es6.math.hypot", "es6.math.imul", "es6.math.log1p", "es6.math.log10", "es6.math.log2", "es6.math.sign", "es6.math.sinh", "es6.math.tanh", "es6.math.trunc", "es7.array.includes", "es7.object.values", "es7.object.entries", "es7.object.get-own-property-descriptors", "es7.string.pad-start", "es7.string.pad-end"]
四:
"web.timers", "web.immediate", "web.dom.iterable"
可以看到 transform-async-generator-functions 确实不在以上列表里。所以没有办法exclude
只有一个 transform-async-to-generator,应用这个与否的差别在哪里呢?
转换前源码:
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('reggsolved');
}, 2000);
});
}
async function asyncCall() {
console.log('calling');
var result = await resolveAfter2Seconds();
console.log(result);
// expected output: 'resolved'
}
asyncCall();
var t = ()=>{
};
exclude transform-async-to-generator 之前:
var asyncCall = (() => {
var _ref = _asyncToGenerator( /*#__PURE__*/ regeneratorRuntime.mark(function _callee() {
var result;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
console.log('calling');
_context.next = 3;
return resolveAfter2Seconds();
case 3:
result = _context.sent;
console.log(result);
// expected output: 'resolved'
case 5:
case 'end':
return _context.stop();
}
}
}, _callee, this);
}));
return function asyncCall() {
return _ref.apply(this, arguments);
};
})();
function _asyncToGenerator(fn) {
return function() {
var gen = fn.apply(this, arguments);
return new Promise(function(resolve, reject) {
function step(key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
return Promise.resolve(value).then(function(value) {
step("next", value);
}, function(err) {
step("throw", err);
});
}
}
return step("next");
});
};
}
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('reggsolved');
}, 2000);
});
}
asyncCall();
var t = () => {};
exclude transform-async-to-generator 之后:
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('reggsolved');
}, 2000);
});
}
function asyncCall() {
var result;
return regeneratorRuntime.async(function asyncCall$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
console.log('calling');
_context.next = 3;
return regeneratorRuntime.awrap(resolveAfter2Seconds());
case 3:
result = _context.sent;
console.log(result);
// expected output: 'resolved'
case 5:
case 'end':
return _context.stop();
}
}
}, null, this);
}
asyncCall();
var t = () => {};
很明显可以看出来,用了excluede之后,代码确实少了很多,但是明显不是源码,预期的效果是不使用任何转换,这个时候在 第一部分的22个key里发现有一个 transform-regenerator ,加上一下试试:
果然没有转化看,所有不转换await 和async的 exclude选型为
"exclude": [
"transform-regenerator",
"transform-async-to-generator",
]
那么还有一个问题就是
"transform-async-generator-functions" 这个到底是干嘛用的?
https://github.com/tc39/propo...
后面有空再研究,本次不予深究
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。