使用babel.js导入/导出无法在浏览器中工作

Question

我在页面中添加了babel编译器以使用下面的ES6语法：

<script src="babel.min.js"></script>

在M.js中创建一个简单的模块如下：

export var M={
    p:3
};

并在我的页面中使用它：

<script type="text/babel">
    import {M} from './M';
    console.log(M.p);
</script>

但在控制台中遇到以下错误：

Uncaught ReferenceError: require is not defined

如何让模块在浏览器中运行？ babel.js是否支持模块？如果没有，如果有其他方法，我可以使ES6模块语法在浏览器中工作。

Answer 1

使用动态ES模块加载程序，如SystemJS和Babel Plugin

Answer 2

您是否尝试过将data-plugin属性设置为＆＃34; transform-es2015-modules-umd＆＃34;？如下所示？

<script data-plugins="transform-es2015-modules-umd" type="text/babel">
    import M from './M';
    console.log(M.p);
</script>