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...

后面有空再研究,本次不予深究


webpack_devsave
16 声望0 粉丝

a