es6 模块化加载html,浏览器实现es6模块化

1. 项目依赖说明

使用 Babel 将 ES6 编译为 ES5 代码

使用 Browserify 编译打包 js

2. 实现步骤

2.1 初始化项目

执行node命令 npm init -y，自动生成package.json文件

{

"name" : "babel-test",

"version" : "1.0.0"

}

复制代码

2.2 下载安装 babel-cli, babel-preset-es2015 和 browserify

#安装babel依赖：

npm i @babel/core @babel/cli @babel/preset-env -D

#安装browserify依赖：

npm install browserify -g

#安装corejs依赖：

npm install --save core-js@2

复制代码

2.3 配置babel预设

新建.babelrc文件，配置babel预设(或者文件名为： babel.config.json)

{

"presets": [

[

"@babel/preset-env",

{

"targets": {

"ie":"10", //这个是自己添加的，最好是加上

"edge": "17",

"firefox": "60",

"chrome": "67",

"safari": "11.1"

},

"useBuiltIns": "usage", (这个选项可以不写)

"corejs": 2,

}

]

]

}

复制代码

2.4 编码

js/src/module1.js //常规暴露：暴露模块方式一：分别暴露

export function foo() {

console.log('module1 foo()')

}

export function bar() {

console.log('module1 bar()')

}

export const DATA_ARR = [1, 3, 5, 1]

复制代码

js/src/module2.js //常规暴露：暴露模块方式二：统一暴露

let data = 'module2 data'

function fun1() {

console.log('module2 fun1() ' + data);

}

function fun2() {

console.log('module2 fun2() ' + data);

}

//统一暴露对象

export {fun1, fun2}

复制代码

js/src/module3.js 默认暴露只能暴露一个

//默认暴露：可以暴露任意数据类型，暴露什么数据，就可以接收什么数据

//默认暴露一个箭头函数

export default () => {

console.log('我是默认暴露的箭头函数')

}

复制代码

js/src/module4.js

//默认暴露一个对象

export default {

msg: 'hello world',

foo() {

console.log('我是默认暴露里面的回调函数：'+this.msg.toUpperCase())

}

}

复制代码

js/src/main.js:主模块文件

/*

* 如果模块文件采用的是 分别暴露或统一暴露对象 的方式(就是常规暴露)，

* 那么引入模块的时候，需要使用 对象的解构赋值的方式 引入模块

* import {foo, bar, dataArr} from './module1';

import {fun1, fun2} from './module2';

* */

//采用常规暴露的方式：引入模块的方法

import {foo, bar, DATA_ARR} from './module1';

import {fun1, fun2} from './module2';

fun1();

fun2();

foo();

bar();

console.log(DATA_ARR);

//采用默认暴露的方式：引入模块的方法

import module3 from './module3'

module3();

import module4 from './module4'

module4.foo();

//引入第三方模块

import $ from 'jquery';

$('body').css('background', 'red')

复制代码

2.5 编译

使用Babel将ES6编译为ES5代码(但包含CommonJS语法) : babel js/src -d js/build

使用Browserify编译js : browserify js/build/main.js -o js/build/bundle.js

2.6 页面中引入测试

复制代码

2.7 引入第三方模块(jQuery)

下载jQuery模块: cnpm install jquery --save

在app.js中引入模块并使用

import $ from 'jquery' $('body').css('background', 'red')

复制代码