欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

chrome浏览器启用es6语法支持,初次体验浏览器端模块化加载

程序员文章站 2022-04-25 15:51:01
...

参照:http://es6.ruanyifeng.com/#docs/module-loader

注意:最新版本的chrome浏览器已支持module语法,需要在web服务器环境下运行!

设置浏览器启用es6语法功能:

1.在浏览器的url中输入:chrome://flags/

设置下面选项为enable,重启浏览器。

chrome浏览器启用es6语法支持,初次体验浏览器端模块化加载

准备代码:

2.index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="module" src="module1.js"></script>
    <script>
    </script>
</head>

<body>
</body>

</html>

3.module1.js

import {show} from './module2.js';
show();

4.module2.js

export function show(){
    i++;
    console.log(i);
}
var i=0;

在浏览器端打开调试:

chrome浏览器启用es6语法支持,初次体验浏览器端模块化加载

ok!