babel-presets-env配置項 exclude 的探究

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

後面有空再研究，本次不予深究