ES6-開發(fā)環(huán)境搭建（1）

android_c 發(fā)布于2019-08-23 15:21 / 2825人閱讀

摘要：全局安裝本地安裝轉(zhuǎn)碼規(guī)則安裝完成后，我們可以看一下我們的文件，已經(jīng)多了選項。直接在線編譯提供一個在線編譯器，可以在線將代碼轉(zhuǎn)為代碼。

古語有云：“君子生非異也，善假于物；工欲善其事，必先利其器。”

    由于有些低版本的瀏覽器還是不支持ES6語法，學(xué)習(xí)ES6，首先要學(xué)會搭建一個基本的ES6開發(fā)環(huán)境，利用工具，把ES6的語法轉(zhuǎn)變成ES5的語法。

1、使用Babel把ES6編譯成ES5

1.1 建立工程目錄

先建立一個項目的工程目錄，并在目錄下邊建立兩個文件夾：dist 和 src

1.2 初始化項目

在安裝Babel之前，需使用npm init先初始化我們的項目。通過cmd打開命令行工具，進入項目目錄，輸入下邊的命令：

npm init -y

命令執(zhí)行完成后，會在項目根目錄下生產(chǎn)package.json文件。

1.3 全局安裝Babel-cli

npm install -g babel-cli

1.4 本地安裝轉(zhuǎn)碼規(guī)則

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

安裝完成后，我們可以看一下我們的package.json文件，已經(jīng)多了devDependencies選項。

1.5 新建.babelrc

在根目錄下新建.babelrc文件，.babelrc是Babel的配置文件。

該文件是用來設(shè)置轉(zhuǎn)碼規(guī)則和插件的，基本格式如下：

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

1.6 babel基本用法

# 轉(zhuǎn)碼結(jié)果輸出到標(biāo)準(zhǔn)輸出
$ babel example.js

# 轉(zhuǎn)碼結(jié)果寫入一個文件 (--out-file 或 -o 參數(shù)指定輸出文件)
$ babel example.js --out-file compiled.js
或者
$ babel example.js -o compiled.js

# 整個目錄轉(zhuǎn)碼 (--out-dir 或 -d 參數(shù)指定輸出目錄)
$ babel src --out-dir lib
或者
$ babel src -d lib

# -s 參數(shù)生成source map文件
$ babel src -d lib -s

在src目錄下，新建index.js文件，使用ES6中的 let聲明和字符串模板

let name = "Bread and Dream";
let greeting = `hello ${name}`;

在命令行輸入

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

這時dist目錄會生成 index.js 文件，輸出結(jié)果為：

"use strict";

var name = "Bread and Dream";
var greeting = "hello " + name;

項目文件最終結(jié)構(gòu)

1.7 簡化轉(zhuǎn)化命令：

使用babel命令行，一大長串，很容易忘記，所以，我們可以進行改造，打開package.json文件，添加以下代碼

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

修改好后，以后我們就可以在命令行輸入 npm run build 進行轉(zhuǎn)換了。

（注：build是自定義的，為了語義化命名為build，當(dāng)然也可以命名成其他的，例如 compile）

2、webpack + Babel 構(gòu)建 ES6 開發(fā)平臺

2.1 搭建 webpack 基本文件目錄

首先全局安裝webpack（這里使用 webpack@3.12.0 版本）

npm install -g webpack@3

新建一個文件夾，命名為 webpack_demo；

命令行切換到 webpack_demo的文件目錄下，執(zhí)行下面的命令，生成默認 package.json 配置文件

npm init -y

利用 npm 安裝 webpack

npm i --save-dev webpack@3

新建 webpack.config.js（用于配置 webpack 的運行方式），最簡單的配置如下：

module.exports= {

/* webpack 入口起點 */
entry:"./index.js",
/* webpack 輸出 */
output:{
    // 輸出 文件名
    filename:"./test.js"
},

}

2.2 安裝babel相關(guān)

安裝 babel-core 包
npm i --save-dev babel-core

安裝babel-preset-env 和 babel-preset-stage-0 包
npm i --save-dev babel-preset-env babel-preset-stage-0
babel-preset-env 是一個主流的 Babel 插件數(shù)組；Stage-X 是實驗階段的 Presets

2.3 將 webpack 和 Babel 結(jié)合在一起

需要在兩者之間建立一條紐帶，而通過 webpack 的 loaders 就可以生成這條紐帶，因此要修改 webpack.config.js 配置文件：

/ webpack loaders 配置 /
module:{

   rules:[
       {
           test:/.js$/,
           use:{
               loader:"babel-loader",
           },
       }
   ],

就是針對以 .js 結(jié)尾的文件使用 babel-loader。由于項目中還不存在 babel-loader，所以要先安裝該模塊：

npm i --save-dev babel-loader

通過使用 loader 語法配置 Babel 的 presets

使用 webpack 提供的方法，具體在 webpack.config.js 的 module.rules.use.options 中配置

 /* webpack loaders 配置 */
    module:{
        rules:[
            {
                test:/.js$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:[
                            "babel-preset-env",
                            "babel-preset-stage-0"
                        ]
                    }
                },
            }
        ],
    },

最終的項目結(jié)構(gòu)為：

在當(dāng)前目錄下執(zhí)行 webpack 命令

webpack

輸入文件 index.js 中的ES6代碼已經(jīng)被轉(zhuǎn)換成輸出文件 test.js 中的 ES5 代碼了：

3、Traceur轉(zhuǎn)碼器

Google公司的Traceur轉(zhuǎn)碼器，也可以將ES6代碼轉(zhuǎn)為ES5代碼。

3.1 直接在頁面中使用：

寫ES6代碼，用：

注意：script標(biāo)簽的type屬性的值是module，而不是text/javascript。這是Traceur編譯器識別ES6代碼的標(biāo)識。

3.2 Traceur的命令行轉(zhuǎn)換方法：

首先需要用npm安裝。

$ npm install -g traceur

直接運行ES6代碼，以index.js為例

$ traceur index.js

將ES6輸出為ES5腳本

$ traceur --script index.js --out es5.js

為了防止有些特性編譯不成功，最好加上–experimental選項。

$ traceur --script index.js --out es5.js --experimental

4、直接在線編譯

Babel提供一個REPL在線編譯器，可以在線將ES6代碼轉(zhuǎn)為ES5代碼。

轉(zhuǎn)換后的代碼，可以直接作為ES5代碼插入網(wǎng)頁運行。

5、總結(jié)

使用babel搭建環(huán)境的順序：

創(chuàng)建項目創(chuàng)建兩個文件夾src和dist

使用npm init 初始化項目生成package.json（項目信息文件）

使用 npm install -g babel-cli 全局安裝

使用 npm install –save-dev babel-preset-es2015 babel-cli本地安裝

創(chuàng)建.babelrc文件（babel轉(zhuǎn)換的配置文件）

在src下創(chuàng)建js，編寫ES6語法

babel src/index.js -o dist/index.js轉(zhuǎn)碼生成ES5語法

babel 本質(zhì)就是一個 JavaScript 編譯器，通過：

將 JavaScript 源代碼解析成抽象語法樹（AST）；

將源代碼的 AST 結(jié)果一系列轉(zhuǎn)換生成目標(biāo)代碼的 AST；

將目標(biāo)代碼的 AST 轉(zhuǎn)換成 JavaScript 代碼。

當(dāng)然，感興趣的小伙伴可以深入研究下babel及其插件的源碼，了解其運行機制，以便更全面的掌握ES6轉(zhuǎn)ES5的相關(guān)原理、機制。

云服務(wù)器 GPU云服務(wù)器開發(fā)環(huán)境搭建搭建開發(fā)環(huán)境安卓開發(fā)環(huán)境搭建 Centos搭建開發(fā)環(huán)境

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/101923.html

發(fā)表評論

登陸后可評論

0條評論

android_c

男|高級講師

我要關(guān)注我要私信

TA的文章

#黑五# racknerd：美國便宜VPS低至$10.88/年，可選6個機房（洛杉磯，圣何塞，西雅圖

閱讀 2428·2021-11-23 10:04
九款程序員必備工具，老少皆宜

閱讀 1497·2021-09-02 15:21
常見的面試問題：【CSS】CSS盒模型

閱讀 894·2019-08-30 15:44
CSS3動畫簡單案例

閱讀 1066·2019-08-30 10:48
純css修改瀏覽器scrollbar滾動條樣式

閱讀 710·2019-08-29 17:21
2000! | 看上去如此簡單的面試題，讓太多“前端”英雄好漢折戟

閱讀 3559·2019-08-29 13:13
4.7 multer文件上傳-博客后端Api-NodeJs+Express+Mysql實戰(zhàn)

閱讀 1987·2019-08-23 17:17
前端小知識10點（2019.4.14）

閱讀 1790·2019-08-23 17:04

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

ES6-開發(fā)環(huán)境搭建（1）

相關(guān)文章

**搭建es6開發(fā)與非開發(fā)環(huán)境babel-browser**

**webpack 項目構(gòu)建：（二）ES6 編譯環(huán)境搭建**

搭建一個es6的開發(fā)環(huán)境

如何搭建es6開發(fā)環(huán)境

**Omi原理-環(huán)境搭建**

發(fā)表評論

0條評論

android_c

男|高級講師

TA的文章

#黑五# racknerd：美國便宜VPS低至$10.88/年，可選6個機房（洛杉磯，圣何塞，西雅圖

九款程序員必備工具，老少皆宜

常見的面試問題：【CSS】CSS盒模型

CSS3動畫簡單案例

純css修改瀏覽器scrollbar滾動條樣式

2000! | 看上去如此簡單的面試題，讓太多“前端”英雄好漢折戟

4.7 multer文件上傳-博客后端Api-NodeJs+Express+Mysql實戰(zhàn)

前端小知識10點（2019.4.14）

最新活動