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環境搭建》

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。