ES6（JavaScript）中的模块module如何正常运行（谷歌浏览器测试，有些浏览器不支持！）

旧城等待， 2021-09-17 12:14 803阅读 1赞

关于ES6模块化的权威参考文档：[https://www.w3cschool.cn/ecmascript/m6yz1q60.html][https_www.w3cschool.cn_ecmascript_m6yz1q60.html]

浏览器使用ES6模块的语法如下。

上面代码在网页中插入一个模块`foo.js`，由于`type`属性设为`module`，所以浏览器知道这是一个ES6模块。

Node的默认模块格式是CommonJS，目前还没决定怎么支持ES6模块。所以，只能通过Babel这样的转码器，在Node里面使用ES6模块。

# **第一个最重要的条件：** #

# **ES6模块化测试必须在服务器上测试，如果本地浏览器访问会报错！** #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

# **服务器部署完毕之后（推荐服务器：lite-server）执行以下三步：** #

第一步：在index.html文件中添加这段代码：

// type 必须设置为 module  才支持ES6模块加载，官方文档有说明：
    
    <script type="module" src="./my_modules/app.js">

第二步：主app.js文件

//主文件app.js
    import  "../lib/jquery-3.3.1.js";
    import {app} from "./node001.js";
    
    
    app.init();
    
    $(function() {
        $("body").css("background","red");
    });

第三步：node001.js文件：

//node001.js文件：
    let app = {
    
        value:1,
        init: () => {
            console.log("模块node001成功");
        }
    };
    
    export {app};

[https_www.w3cschool.cn_ecmascript_m6yz1q60.html]: https://www.w3cschool.cn/ecmascript/m6yz1q60.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/2e653f25fb1a460fb4cc3be9fa0bd687.png