解决模块尚未加载错误 Babel async-await

Question

我正在使用babeljs 来转换我的javascript 代码。我正在使用async-await 处理jquery 中的异步ajax 调用。我无法从Babeljs Documentation 中弄清楚我需要哪些配置才能使其正常工作。使用下面的配置我得到了错误

尚未为上下文加载模块名称“babel-polyfill”：_。使用 require([])

为了正确配置 Babel，我需要进行哪些配置更改（或代码更改）？任何关于使用 Babel/es2015+ 的额外解释将不胜感激。

.babelrc

{
  "plugins": [ "transform-async-to-generator" ],
  "presets": ["env"]
}

package.json

{
  "dependencies": {
    "@types/jquery": "^2.0.46",
    "@types/papaparse": "^4.1.28",
    "@types/xrm": "^8.2.5",
    "babel-polyfill": "^6.23.0",
    "bootstrap": "^3.3.7",
    "papaparse": "^4.3.3",
    "requirejs": "^2.3.3",
    "vue": "^2.3.3"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-preset-env": "^1.5.2"
  },
  "name": "mypackage",
  "private": true,
  "scripts": {
    "build": "babel WebResources -d build/CCSEQ"
  },
  "version": "1.0.0"
}

main.js (pre-babel)

/// <reference path="../node_modules/@types/jquery/index.d.ts" />
"use strict";

require("babel-polyfill");

requirejs.config({
    paths: {
        PapaParse: "/papaparse.min",
        Constants: "/build/CCSEQ/Constants",
        Model: "/build/CCSEQ/Model",
        WebAPI: "/build/CCSEQ/WebAPI",
        Xrm: "/build/CCSEQ/Xrm",
        Vue: "/node_modules/vue/dist/vue"
    }
})   

require(["PapaParse", "Constants", "Model", "WebAPI", "Xrm", "Vue"], function (Papa, Constants, Model, WebAPI, Xrm, Vue) {
function ImportExpenseTransaction(data) {
        let newExpenseTransactions = new Array();
        let entityID = Xrm.Page.getCurrentEntityID();
        data.forEach(async (expense) => {
            if (expense[0] !== "PR EMP ID") {
                let newExpenseTransaction = new Model.Entity();

                newExpenseTransaction.Type = Constants.EntityType.ExpenseTransaction;
                newExpenseTransaction.Attributes.push(new Model.EntityField("ccseq_employeeid",
                    await WebAPI.Get(new Model.QueryDetails(Constants.EntityType.SystemUser, expense[0], ["systemuserid"], [new Model.Condition("ccseq_chnnavid", expense[0], Constants.Condition.EQUALS)])),
                    Constants.EntityType.SystemUser));                    
                newExpenseTransactions.push(newExpenseTransaction);
            }
        });
});

main.js（后巴别塔）

/// <reference path="../node_modules/@types/jquery/index.d.ts" />
"use strict";

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"); }); }; }

require("babel-polyfill");

requirejs.config({
    paths: {
        PapaParse: "/node_modules/papaparse/papaparse.min",
        Constants: "/build/CCSEQ/Constants",
        Model: "/build/CCSEQ/Model",
        WebAPI: "/build/CCSEQ/WebAPI",
        Xrm: "/build/CCSEQ/Xrm",
        Vue: "/node_modules/vue/dist/vue"
    }
});

require(["PapaParse", "Constants", "Model", "WebAPI", "Xrm", "Vue"], function (Papa, Constants, Model, WebAPI, Xrm, Vue) {
function ImportExpenseTransaction(data) {
        var _this = this;

        var newExpenseTransactions = new Array();
        var entityID = Xrm.Page.getCurrentEntityID();
        data.forEach(function () {
            var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(expense) {
                var newExpenseTransaction;
                return regeneratorRuntime.wrap(function _callee$(_context) {
                    while (1) {
                        switch (_context.prev = _context.next) {
                            case 0:
                                if (!(expense[0] !== "PR EMP ID")) {
                                    _context.next = 32;
                                    break;
                                }

                                newExpenseTransaction = new Model.Entity();


                                newExpenseTransaction.Type = Constants.EntityType.ExpenseTransaction;
                                _context.t0 = newExpenseTransaction.Attributes;
                                _context.t1 = Model.EntityField;
                                _context.next = 7;
                                return WebAPI.Get(new Model.QueryDetails(Constants.EntityType.SystemUser, expense[0], ["systemuserid"], [new Model.Condition("ccseq_chnnavid", expense[0], Constants.Condition.EQUALS)]));

                            case 7:
                                _context.t2 = _context.sent;
                                _context.t3 = Constants.EntityType.SystemUser;
                                _context.t4 = new _context.t1("ccseq_employeeid", _context.t2, _context.t3);

                                _context.t0.push.call(_context.t0, _context.t4);
                                newExpenseTransactions.push(newExpenseTransaction);

                            case 32:
                            case "end":
                                return _context.stop();
                        }
                    }
                }, _callee, _this);
            }));

            return function (_x) {
                return _ref.apply(this, arguments);
            };
        }());
});

Answer 1

我可以看到的一件事是，您实际上并没有对

做任何事情

require("babel-polyfill")

在require 中，返回模块的导出供您使用。仅仅在 main.js 中有第 4 行是不够的。

也就是说，我不确定在这种情况下您应该对该模块做什么。

我在我们的测试套件中遇到了一个 polyfill 问题（我们使用 karma）并且不得不像这样解决它（来自 karma.conf.js）

module.exports = function (config) {
  config.set({
    // to run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    browsers: ['PhantomJS'],
    frameworks: ['mocha', 'sinon-chai'],
    reporters: ['spec', 'coverage'],
    files: [
       '../../node_modules/babel-polyfill/dist/polyfill.js',
      './index.js'
    ],
    preprocessors: {
      './index.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }
  })
}

我必须将 polyfill.js（位于 /dist 下的 babel-polyfill 模块中）的相对路径添加到 files 属性中。也许你需要做类似的事情？

但您可能希望将 require 的返回值存储到类似的东西中

var polyfill = require("babel-polyfill")

然后在某处引用它。

希望这会有所帮助。

¯\_(ツ)_/¯

---

甚至可能在路径中添加如下内容：

Polyfill: "/node_modules/babel-polyfill/dist/polyfill.js"