Question

我正在玩一些新的 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应该做脏事，对吧？

Answer 1

由于这个插件，我成功地使用了一个简单的不同配置（ babel-node cli＆amp;因此 commonjs ）来处理Babel 6上的事情：{{3} }（npm install babel-plugin-system-import-transformer）。这是我的 .babelrc ：

的摘录

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

设置amd而不是文档中指出的常见内容应该可以帮到你。

只有这个小插件的限制，你应该获得一个普通的字符串模块名称，如System.import("plainString")而不是计算的名称（也不是+的字符串连接，也不是新的ES6 https://www.npmjs.com/package/babel-plugin-system-import变量名）。它似乎与template literal有关。

如果可以的话，我会尽力修复这个限制。

Answer 2

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

（怎么样）我可以在babel中使用System.import和require.js吗？

2 个答案: