Javascript JS：在客户端启用导出/导入（ES6或使用babel）？_Javascript_Google Chrome_Ecmascript 6_Include_Babeljs

Javascript JS：在客户端启用导出/导入（ES6或使用babel）？

javascript google-chrome ecmascript-6

Javascript JS：在客户端启用导出/导入（ES6或使用babel）？,javascript,google-chrome,ecmascript-6,include,babeljs,Javascript,Google Chrome,Ecmascript 6,Include,Babeljs,我想导出/导入应用程序目录中的本地文件：我的index.html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head> <body> <script t

我想导出/导入应用程序目录中的本地文件：

我的

index.html

：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<script type="text/babel" src="main.js"></script>
</body>
</html>

main.js

（从index.html加载）：

现在，如果我在没有babel的情况下使用javascript，我将得到：

未捕获的语法错误：意外的令牌导入

我使用Chrome浏览器版本60。这个版本不应该已经支持ES6了吗？通过支持，我应该能够使用导出/导入

我还尝试了babel（使用从

index.html

加载的独立babel）

然后我得到这个错误：

Uncaught ReferenceError: require is not defined
    at <anonymous>:4:16
    at n (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27049)
    at r (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27558)
    at e.src.i.(anonymous function).error (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27873)
    at XMLHttpRequest.i.onreadystatechange (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27316)

未捕获引用错误：未定义require
至少，您需要在Chrome中启用实验Web平台
标志并使用
。但使用它，停止加载任何内容。看来浏览器只是忽略了这样的类型。即使这种方法可行，我想我也不能使用babel，因为它会使用不同的类型
注：根据这一点：它应该可以工作。
Chrome已经实现了es6的大部分新功能，除了导入/导出尚未实现之外，更多细节如下：
如果不想使用webpack编译文件，请尝试：
$ npm install --global babel-cli

然后：
babel example.js -o compiled.js

最后，您将获得支持浏览器的编译文件
另外，关键字require/exports/module.exports
是一个公共js规范，由Node.js支持https://unpkg.com/babel-standalone@6.15.0/babel.min.js

使用CommonJS规范，因此，大约80%的浏览器用户（）支持浏览器端的导入

/导出
语句，以后还会继续使用（）
如何使用它
在模块（myModule.js）中：
在index.html中
<script type="module">
    import myVar from './myModule.js'
    console.log(myVar) // output 10
</script>


从“./myModule.js”导入myVar
console.log（myVar）//输出10

是的，您需要一个transpiler（将ES6模块语法转换为AMDrequire
）+（动态）模块加载器，或者一个类似于（transpiler+）捆绑程序的网页包。如果您想尝试Chrome对模块的实验性支持：“actions”
不是有效的客户端模块标识符。您需要从类似于“./actions.js”
的东西导入。如果我编译（使用babel），它会添加一些缺少的分号，但语法保持不变。所以，当我试图运行编译后的文件时，它会抛出相同的错误（包括或不包括babel lib）而不是“操作”；因为node将从当前目录中的node_模块中找到此文件。
babel example.js -o compiled.js

const myVar = 'Hello !!';
export {
    myVar
}

<script type="module">
    import myVar from './myModule.js'
    console.log(myVar) // output 10
</script>