1

我正在玩一些新的ES6功能和 Babel。我通过require.js（转换为AMD）成功地使用了模块导出/导入功能，但实验性模块加载器不想工作。这是我的代码和配置：

提取物front-app/tst.js

import {tstimp as functocall} from "front-app/tstimp.js";

...

/**
 * LOADING MODULES DYNAMICALLY
 */
System.import('front-app/tst_dyn_mod')
    .then(some_module => {
        console('using the module!');
        some_module.sayHello();
    })
    .catch(error => {
        console.log('error!');
        console.log(error);
    });

我的.babelrc样子是这样的：

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-es2015-modules-amd"]
}

我导入的脚本是这些，按顺序：

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
        <script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
        <script data-main="front-app/tst" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js"></script>
        <script src="node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
    </head>
    <body></body>
</html>

不幸的是，我使用 firefox 得到以下错误：

error! tst.js:695:9
Error: a is undefined
    Error loading http://localhost/es6r1/front-app/tst_dyn_mod

那是什么a？我错过了什么吗？请记住，我的代码已转译为 AMD，但System应该保留在转译代码中（并且它就在那里）。polyfill 应该完成这项肮脏的工作，对吧？

4

2 回答 2

0

由于这个插件，我成功地在 Babel 6 上使用了一个稍微不同的配置（babel-node cli 和因此commonjs ）： https ://www.npmjs.com/package/babel-plugin-system-import （npm install babel-plugin-system-import-transformer）。这是我的.babelrc的摘录：

…
"plugins": [
  "system-import-transformer",
  {
    "modules": "common"
  }
]
…

设置amd而不是文档中指示的常见设置应该可以为您解决问题。

这个小插件的唯一限制，你应该得到一个普通的字符串模块名称System.import("plainString")，而不是一个计算的（也不是与 的字符串连接+，也不是新的 ES6模板文字，也不是变量名）。它似乎与那行代码有关。

如果可以的话，我会尝试修复该限制。

于 2016-02-29T22:12:35.683 回答
0

只是对此的更新，https://github.com/thgreasi/babel-plugin-system-import-transformer支持非字符串参数。只要确保不要使用更新的别名包。

于 2017-10-13T18:40:46.783 回答