ECMAScript6学习笔记

原创 北鸟南游 教程 JavaScript 411阅读 2017-05-15 10:02:28 举报

1:环境的安装

$npm init -y
使用node安装一个package.json配置文件
json 代码

安装babel(命令行工具cli)。安装之后就可以使用babel命令
$npm install -g babel-cli

全局安装babel-preset-es2015 babel-cli
$npm install babel-preset-es2015 babel-cli --save-dev

项目中建立一个.babelrc文件
json 代码

有了基础环境,就可以执行
$babel src/index.js -o dist/index.js
src/index.js (src文件夹下的index.js[ec2016]) -o(转换成) dist/index.js(dist文件夹下的index.js[ec2015])

安装完成后package.json文件内容
json 代码

就可以直接简单执行$npm run build命令编译

2:安装一个gulp自动执行工具

gulpfile.js文件
javascript 代码

》》》然后执行$gulp命令就可以编译,并且自动监听到文件改变时自动编译。

这两步就安装完成了编译环境

3:使用webpack安装ES6的编译环境/size]
文件目录结构

ECMAScript6学习笔记
首先确保本地安装node
项目中初始化一个node 的环境
$npm init
不需要修改名称直接安装。
这时候会出现一个package.json的文件
{
"name": "ecmascript6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-latest": "^6.24.1",
"webpack": "^2.4.1"
}
}
由于解析es6需要使用babel-loader,安装依赖的loader
$npm install webpack --save-dev
$npm install babel-loader babel-core --save-dev
$npm install babel-preset-latest --save-dev
安装完成后会存放至node_modules

然后手动新建一个webpack.config.js文件webpack的默认配置文件
module.exports = {
entry: './src/main.js',
output: {
path:__dirname,
filename: 'dist/bundle.js'
},
module:{
loaders:[
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: /src/,
query:{
presets:['latest']
}
}
]
}

}

// index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>

// src/main.js
import arrow from './arrowFn.js'
alert('arrowFn'+arrow(5));

// src/arrow.js
let arrow = x => x * x;
export default arrow;

评论 ( 1 )
最新评论
rolitter 2017-05-16 11:25:00 1F

html 代码