使用import
运行Chrome {61 supposed to support module loading。
确实,保罗demo为我工作。但是,当我自己尝试时,我得到一个JS错误"意外的令牌导入"。 Chrome似乎对import
:
的test.html
<!doctype html>
<html>
<body>
<script src="test.js"></script>
</body>
</html>
test.js:
import {hello} from './something.js'
console.log(hello())
something.js
export {hello}
function hello() {
return "hello world"
}
为什么Chrome无法理解&#34;导入&#34;
答案 0 :(得分:17)
那应该是<script type=module src=test.js>
。在模块脚本中巧妙地更改了整个语法(import
和export
是允许的,并且严格模式是强制性的。)
答案 1 :(得分:2)
最后...弄清楚了。 chrome://flags
搜索import
启用ES6导入语法。重新启动Chrome。要开心。
答案 2 :(得分:2)
对于那些想确切了解对我有用的人来说,这是上面几个答案的结合。我还必须通过在网址栏中输入chrome:// flags并搜索“导入”来启用Chrome的ES6导入功能。
首先是HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Testing JavaScript Stuff</title>
</head>
<body>
<script type="module">
import { circleArea, squareArea } from './CalcArea.js';
console.log(circleArea(2));
console.log(squareArea(2));
</script>
</body>
</html>
因此您可以看到,只需将类型“ module”添加到脚本标签中,然后在下面进行导入。对于我的测试,CalcArea.js文件是这样的:
const circleArea = r => 3.14 * (r ** 2);
const squareArea = s => s * s;
export {circleArea, squareArea};