一. es6简介
es6就是es5的升级版,es5是js的通用标准,绝大多数浏览器都支持其语法,但es6不同,如果es6的代码需要在浏览器上运行,那就先将es6转化为es5。如果在es6中使用模块化机制,需要将每个模块合并为总模块再来使用。
二. es6的模块化机制
-
定义模块
$ mkdir app01
$ cd app01
$ npm init -y
初始化完毕后,当前项目中会出现package.json文件,该文件是项目的核心文件,记录了项目的信息以及依赖信息,以及脚本信息
在app01(一个项目的名称)项目中,任何js都可以理解为一个模块。没一个模块内部,也就是每个js都可以访问一个对象(module),该对象有一个属性exports属性是对外的接口
//user.js
//An highlighted block
var user = {
name:'terry',
age:12
};
//将user对象暴露给该模块的调用者
module.exports = user;
- 模块的引用
var a = require('./user.js');
console.log(a);
require()函数参数可以为:(1)路径,一般指向自定义模块的路径。(2)模块名称,寻找该目录路径为 ./node_modules -> …/node_modules/ -> …/…/node_modules
三. babel的转换
es6:------->
babel----->
es5(单个文件转换)
1. npm的简单应用
$ npm install xxx --save
本地安装,安装到当前目录的node_modules目录下
$ npm install xxx --save-dev
本地安装,安装到当前目录的node-modules目录下
-dev 表示仅仅在开发阶段,当打包的时候,该模块不会被打包发布。
$ npm install xxx --global
全局安装,安装到node的家目录下,供所有的项目使用
1. npm的简单应用
(1) babel-cil
$ npm install babel-cil --global
安装的时候如果node安装在了系统目录,将无权限安装babel-cil
在安装babel-cli的时候可能会出现权限问题(如果node没有安装到用户家目录)
方案一:重新安装node
方案二:改变node目录安装权限
$ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
(2) babel-preset-latest
转换规则,安装最新的es6语法进行转换
$ npm install babel-preset-latest --save-dev
(3)在当前目录下添加配置文件
.babelrc
{
"preset":["latest"]
}
(4) 转化(手动)
babel 1-hello.js -o 1-hello-es5.js
(5) 打包
1. 安装打包器
webpack
npm install webpack webpack-cil --save-dev
- 添加配置文件 webpack.config.js
var path = require('path');
module.exports = {
entry:'./index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[{
test:/\.js$/,
use:['babel-loade']
}]
}
}
-
为webpack.json添加脚本
项目信息
依赖信息
产品依赖 --save
开发依赖 --save-dev
脚本信息 scripts -
执行打包
$ npm run build (目录中会多一个dist)
-
安装安装babel-core babel-loader
$ npm install babel-core babel-loader --save-dev 改变当前loader的版本 $ npm install babel-loader@7 --save-dev
-
安装预设babel-preset-latest
$ npm install babel-preset-latest --save-dev
-
配置babel的配置文件 .babelrc
{
“preset”:[“latest”]
} -
在webpack中集成
开发过程
1. 创建模块化项目
2. 使用模块化进行编程
3. 打包模块形成 bundle.js
4. 将bundle.js集成到index.html中
5. 在浏览器上运行
以上是es6的基本语法