JavaScript 模块化规范 (二) | ES6

  • JavaScript
  • 2020-05-17 17:35:35
  • 浏览 37
简介在 ES6 中,import、export 取代了 require、module.exports 用来引入和导出模块

概述

在 ES6 中,import、export 取代了 require、module.exports 用来引入和导出模块

ES6 模块输出的是值的引用,输出接口动态绑定,而 CommonJS 输出的是值的拷贝
ES6 模块编译时执行,而 CommonJS 模块总是在运行时加载

ES6 模块化应用

由于浏览器不能完全支持 ES6 及以上语法,需要借助一个工具,将代码转化 ES5 语法,安装 Babel

npm install -g babel-cli

安装 ES5 转化

npm install --save-dev babel-preset-es2015

编写模块 module

export default class {

    constructor() {
        this.msg = 'hello world';
    }

    say() {
        console.log(this.msg);
    }

}

编辑 app.js

import Module from './module/module'
let module = new Module();
module.say();

新增 babel 配置文件 .babelrc

{
    "presets": [
        "es2015"
    ]
}

使用 babel 将 ES6 语法转化为 ES5 语法

babel src -d build

使用 browserify 将代码转化为浏览器可执行代码

browserify build\app.js -o dist\bundle,js

新建 HTML 文件并引入 bundle.js 文件,用浏览器打开该 HTML 文件

代码仓库

https://github.com/365D1/javascript-modules.git

文章评论