(如何)我可以在 babel 中使用 System.import 以及 require.js

我正在玩一些新的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应该保留在转译的代码中(它就在那里(。填充物应该做脏活，对吧？

由于这个插件，我成功地让这个东西在 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 模板文字，也不是变量名称(。它似乎与那行代码有关。

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

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

相关内容

最新更新

热门标签：