Fujuhao

ES6新特性_模块化(module)

ES6新特性_模块化(module)

本文主要介绍,ES6新特性,ES6模块化(module),ES6模块化声明，ES6模块化导入(import), ES6模块化导出(export), ES6模块化编译, ES6模块化引入npm包...等, ES6模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

ES6模块化的好处

ES6模块化的优势有以下几点：

  1. 防止命名冲突
  2. 代码利用
  3. 高维护性

ES6模块化-规范产品

ES6之前的模块化规范有

  1. commonJS => NodeJS, Browserify
  2. AMD => requireJS
  3. CMD => seaJS

ES6模块化语法

模块功能主要由两个命令构成： export 和 import

  • export 命令用于规定模块的对外接口(导出模块)
  • import 命令用于输入其它模块提供的功能(导入模块)

ES6模块化 export 导出的三种方法

  1. 分别暴露 m1.js
// 分别暴露
export let name = 'fujuhao.com';

export function func(){
    console.log('fujuhao.com');
}
  1. 统一暴露 m2.js
// 统一暴露
let name = 'fujuhao.com';

function func(){
    console.log('fujuhao.com');
}

export { name, func };
  1. 默认暴露 m3.js
// 默认暴露
export default {
    name: 'fujuhao.com',
    func: function(){
        console.log('fujuhao.com');
    }
}

ES6模块化 import 导入的三种方法

  1. 通用的引入方式
// 模块化引入js,
import * as m1 from './m1.js';
import * as m2 from './m2.js';
import * as m3 from './m3.js';

console.log(m1.name); // fujuhao.com
console.log(m2.name); // fujuhao.com
console.log(m3.default.name); // fujuhao.com
  1. 解构赋值的方式
// m1.js
import { name, func } from './m1.js';

// m2.js 别名
import { name as nm, func as fc } from './m2.js';

// m3.js 由于是默认暴露，如果要使用解构赋值的方式，必须要给default起个别名
import { default as m3js } from './m3.js';
  1. 简便方式，只针对默认暴露
import m3 from './m3.js';

ES6模块化-引入NPM包

如果我们想使用jquery, 此时我们就可以使用npm来安装和导入

  1. 安装
npm install jquery
  1. 在app.js导入
import $ from 'jquery'; // 相当于const $ = require("jquery");

ES6模块化-完整演示

  1. 目录结构 src 就是我们的源代码，后期我们会使用编译工具对其进行编译, app.js就是我们的入口文件
├── index.html
└── src
    └── js
        ├── app.js
        └── module.js
  1. Index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6模块化演示</title>
</head>
<body>
    <script src="src/app.js" type="module"></script>
</body>
</html>
  1. app.js
import { name, func } from './module.js';
// console.log(name);
  1. module.js
// 分别暴露
export let name = 'fujuhao.com';

export function func(){
    console.log('fujuhao.com');
}

ES6模块化-转换和编译

由于兼容性问题，我们需要将es6的源码转换成es5, 需要使用到的工具：babel-cli, babel-preset-env, browserify。

  • babel-cli 是一个命令行工具
  • babel-preset-env 是将es6转换成es5的语法
  • browserify 是一个打包工具, 一般项目中会使用(webpack)打包
1. 安装工具
# 初始化npm的一个包文件
npm init --yes 

# 安装这三个工具
npm install babel-cli babel-preset-env browserify -D

# 查看安装的版本
npx babel --version
6.26.0 (babel-core 6.26.3)
2. 转换

现在我们需要将src目录的源代码进行转换，转换命令：

npx babel src/js -d dist/js --presets=babel-preset-env

# 转换完成， 会在根目录下生成dist目录，里面就是转换好的js
src/js/app.js -> dist/js/app.js
src/js/module.js -> dist/js/module.js
3. 打包

第二步转换完后，还不能直接引入，所以我们还需要进行打包，现在我们将转换好的文件打包到dist/bundle.js,打包命令：

npx browserify dist/js/app.js -o dist/bundle.js

打包完就可以在index.html中引入：

<script src="dist/bundle.js"></script>
上一篇：ES6新特性_number数值扩展与object对象方法扩展
下一篇：ES7新特性_ECMAScript7_includes_指数运算符

The Posts

← View all posts
Loading...