es6环境搭建

时间 2020-01-13

原文原文链接

安装node环境地址：https://nodejs.org/en/download/
创建项目目录创建一个项目目录es6-demo，并在目录下创建两个子文件夹src和dist；
src：源代码es6的目录
dist：编译后es6的目录
初始化项目使用下面命令初始化项目，在项目目录下生成package.json文件：php

npm init
//或者
npm init -y

二者区别在于，前者是分步确认生成的信息，后者是默认确认生成的信息；
全局安装babel-cli Babel 是一个普遍使用的 ES6 转码器，能够将 ES6 代码转为 ES5 代码，从而在现有环境执行；Babel提供了babel-cli工具，用于命令行转码；html

npm install babel-cli -g

基本用法：node

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

创建.babelrc 在项目根目录下，建立.babelrc，.babelrc是Babel的配置文件；该文件是用来设置转码规则和插件的，基本格式以下：webpack

{
    "presets":[],//转码规则
    "plugins":[]// 转码插件
}

安装转码规则在本地安装转码规则模块babel-preset-es2015:es6

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

而后，将规则加入.babelrc文件当中：web

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

编译基本代码在项目根目录下创建index.html文件
/index.htmlnpm

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello es6</title>
    <script src="./dist/index.js"></script>
    </head>

    <body>
    Hello es6
    </body>

</html>

引入js文件，是编译后的js文件，即dist目录下的文件；
在src文件下建立即将要编写的index.js文件
/src/index.js编程

let a = 1;
let b = 1;
console.log(a + b);

这里用的let是es6的一种声明方式，接下来咱们须要把这个ES6的语法文件自动编程成ES5的语法文件。
首先，咱们使用babel命令行来编译：json

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

这样就能够，看见在dist目录下生成一个index.js文件：babel

"use strict";

var a = 1;
var b = 1;
console.log(a + b);

编译成功。
使用babel命令行，一大长串，很容易忘记什么，因此，咱们能够改造package.json，来使用更容易记住的命令来编译:

"scripts": {
    "build": "babel src/index.js -o dist/index.js"
}

在"scripts"模块下，添加上面的命令行，而后使用命令：

npm run build

就能够直接编译了；
Webpack自动编译具体请参考做者webpack 3.X学习之Babel配置
参考：
阮一峰的es6入门http://es6.ruanyifeng.com

原文：
http://hawkzz.com/blog/blog/1...;

转载于猿2048:⇛《es6环境搭建》