解决模块尚未加载，但错误Babel异步
我使用babeljs来转换我的JavaScript代码。 我正在使用异步等待在jquery中处理异步ajax调用。 我一直无法从Babeljs文档中找到我需要什么配置才能使其工作。 使用下面的配置我得到错误
模块名称“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);
};
}());
});
我可以看到的一件事是，你实际上没有做任何事情
require("babel-polyfill")
如在require中返回模块的导出供您使用。 只需在main.js中有第4行是不够的。
这就是说我不确定你在这方面应该怎么做。
我用我们的测试套件（我们使用karma）遇到了一个polyfill问题，必须像这样解决它（来自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' }
]
}
})
}
我不得不将相对路径添加到files属性中的polyfill.js（位于/ dist下的babel-polyfill模块中）。 也许你需要做类似的事情？
但是你可能想要将require的返回值存储为类似的东西
var polyfill = require("babel-polyfill")
然后在某处引用。
希望这可以帮助。
¯ _（ツ）_ /¯
甚至可能在路径中添加如下内容：
Polyfill: "/node_modules/babel-polyfill/dist/polyfill.js"
上一篇: Resolve Module has not been loaded yet error Babel async