ES6
一、规范
1.1 说明
- http://es6.ruanyifeng.com/#docs/module
- 依赖模块需要编译打包处理
1.2 语法
- 导出模块: export
- 引入模块: import
二、实现
- 使用Babel将ES6编译为ES5代码
- 使用Browserify编译打包js
三、ES6-Babel-Browserify使用教程
- 定义package.json文件
npm init -y
- 安装babel-cli, babel-preset-es2015和browserify
-
(cli:command line interface 命令行接口)npm install babel-cli browserify -g
-
npm install babel-preset-es2015 --save-dev
- 定义 .babelrc 配置文件(rc即run control运行控制文件)
{ "presets": ["es2015"] }
- 编码
- js/src/module1.js
// 分别暴露模块 export function foo() { console.log('foo() module1') } export function bar() { console.log('bar() module1') } export let arr = [1, 2, 3, 4, 5, 6]
- js/src/module2.js
// 统一暴露 function fun() { console.log('fun() module2') } function fun2() { console.log('fun2() odule2') } export { fun, fun2 }
- js/src/module3.js
// 默认暴露,可以暴露任意数据类型,暴露什么数据接收到的就是什么数据 // 语法:export default value // export default () => { // console.log('我是默认暴露的箭头函数') // } // 默认暴露一个对象 export default { msg: '默认暴露', foo() { console.log(this.msg) } }
- js/src/main.js
-
在ES6这种模块化规范里,如果用分别暴露或者统一暴露(常规暴露)这两种方式都有一个特点:要求在引入的时候必须用对象解构赋值的形式
// 引入其他模块 // 语法:import xxx from '路径' import {foo, bar} from './module1' import {fun, fun2} from './module2' import module3 from './module3' foo() bar() fun() fun2() module3.foo()
- 编译
- 使用Babel将ES6编译为ES5代码(但包含CommonJS语法) : babel js/src -d js/lib
- 使用Browserify编译js : browserify js/lib/app.js -o js/lib/bundle.js
- 页面中引入测试
当修改模块js文件被修改后,需将编译这部分操作重复一遍
-
引入第三方模块(jQuery)
1). 下载jQuery模块:
-
npm install [email protected] --save (@1即指定下载1版本里最新的版本,@后接要指定的版本号)
2). 在main.js中引入并使用
import $ from 'jquery' // 引入第三方库 $('body').css('background', 'pink')
-