直接上代码, 成功测验了es6的新特性 import , export语法。
服务器返回 js文件时,要加上content-type: applicaiton/javascript 这个字段。
index.html
<!DOCTYPE html> <meta name="viewport" content="width=device-width, minimum-scale=1.0"> <script type="module"> import { foo,name,s } from './foo.js'; alert(foo()); alert(name); </script>
foo.js
export function foo() { return 'bar'; } export var name='ljl';
//另外,export支持别名导出, 所以改成下面这样也是可以的。
export function foo() { return 'bar'; } var name='ljl'; var age = 28; export{age,name as nale, name}
chrome 浏览器version 68 :运行(http://localhost:8080/index.html)结果如下
去掉我故意加入的 "s"后, 就不会报错了。
另外,当然抽成3个文件也是可以的。
也能运行成功。
参考原文:https://jakearchibald.com/2017/es-modules-in-browsers/
https://segmentfault.com/a/1190000014342718
----------------------------------------------------------------------------------------------------------------------