ES6基础入门

从ES6测试环境搭建到重点知识点小结。

浏览器环境搭建

ES6语法虽然也是原生JS，但并不是所有浏览器都支持，要在chrome下正常运行，还需要一些构建工具。首先安装好Git(windows系统下)，然后在在git bash输入git clone https://github.com/cucygh/es6-webpack.git下载源码，然后安装

1
2
3
4


cd es6-webpack
npm install
npm install webpack -g
npm install webpack-dev-server -g

运行

1

npm start

浏览器自动打开localhost:9000，页面显示h33，说明服务已经正常启动。

执行代码

打开文件夹es6-webpack，例如在src下编辑example.js，在index.js中导入

1
2


import "./src/example"
test()

即可在浏览器端自动输出。

使用

配置好后，想测试任何ES6的语法，可以在对应文件夹中编写js代码，打开Git输入cd es6-webpack，在命令行执行npm start，浏览器会自动打开http://localhost:9000/，打开浏览器调试面板查看结果就可以了。

工程环境搭建

在E盘新建文件夹es6，作为工程目录，在目录下新建文件夹src和dist

src存放es6代码文件
dist存放被编译为es5的代码文件在src下新建index.html和index.js，在html里引入js文件

1

<script src="./dist/index.js"></script>

在index.js里用es6语法写一个变量声明，接下来我们将它转换为es5的语法文件。

打开终端，在es6文件夹下npm init -y初始化项目，会生成package.json文件。全局安装babel-cli

1

npm install -g babel-cli

本地安装babel-preset-es2015 和 babel-cli

1

npm install --save-dev babel-preset-es2015 babel-cli

然后在src下新建.babelrc，添加以下代码

1
2
3
4
5
6


{
  "presets":[
    "es2015"
  ],
  "plugins":[]
}

输入以下命令，就可以看到dist下的index.js是es5的写法。

1

babel src/index.js -o dist/index.js

简化命令：打开package.json，找到"scripts"，将"test": "echo \"Error: no test specified\"&& exit 1"更改为"build": "babel src/index.js -o dist/index.js"，就可以使用npm run build(替换babel src/index.js -o dist/index.js)命令来转换了。

核心知识点

模板字符串

1
2
3
4
5
6


// 所有模板字符串的空格、换行和缩进，都是被保留的
// 原生 JS
const message = 'This is my\n'+'first message.';  // This is my 'first' message.
const another = 
`This is my
'first' message`;

1
2
3
4
5
6
7
8
9


// 模板字符串中嵌入变量，需要将变量名写在${}之中。
const name = 'John';
const another=
`Hi ${name},

Thank you for joining my team.

Regards,
Mosh`;