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

marser 發(fā)布于2019-08-22 15:08 / 2744人閱讀

摘要：本質就是一個編譯器，通過將源代碼解析成抽象語法樹將源代碼的結果一系列轉換生成目標代碼的將目標代碼的轉換成代碼。項目構建三開發(fā)環(huán)境本地服務器搭建源碼下載地址參考資料入門阮一峰中文文檔中文網(wǎng)

注：以下教程均在 windows 環(huán)境實現(xiàn)，使用其他操作系統(tǒng)的同學實踐過程可能會有些出入。

??在上一章 webpack 項目構建：（一）基本架構搭建我們搭建了一個最基本的 webpack 項目，現(xiàn)在讓我們以此為基礎，結合 babel，構建一個可以運行最新 ES6 語法的 webpack 項目。

一、上期回顧

??在上一章，我們搭建了一個如下結構的 webpack 項目：

??并通過 webpack.config.js 的 entry 和 output 屬性，配置了 webpack 的打包規(guī)則：

webpack.config.js

??即以當前目錄下的 index.js 為打包入口，通過 webpack 打包構建，在當前目錄生成一個 test.js 文件。通過簡單的配置就能讓 webpack 正常工作了。
??現(xiàn)在通過在當前目錄執(zhí)行 webpack 打包命令，我們就能得到 test.js 文件了。

二、使用打包生成的 test.js 文件

??第一章中 index.js 文件做的事情很簡單，僅僅是聲明了一個值為整型 123 的 test 變量。

index.js

??在實際的環(huán)境中，這樣一段代碼完成的功能很有限。現(xiàn)在讓我們來擴展我們的項目，使之能完成更強大的功能。

修改 index.js 文件，完成等待 1 秒彈出問候語的功能：
index.js

webpack 打包生成 test.js 文件；

新建 index.html 文件，并引用打包生成的 test.js 文件：
index.html

??現(xiàn)在讓我們在瀏覽器里打開 index.html 文件，等待一秒就會彈出信息為 Hello word! 的彈窗。由此可見打包生成的 test.js 具有 index.js 一樣的功能。
??這是因為 webpack 打包的本質，就是從入口文件出發(fā)，遞歸解析所有相關的依賴文件，并打包成一個或多個文件（bundle）。webpack 只是重新組織、精簡了你寫的代碼，并不會影響代碼的功能。webpack 的魅力也正是在于其強大的組織、優(yōu)化代碼的能力。現(xiàn)在讓我們一步步地深入了解 webpack 的打包配置，一點點揭開 webpack 神秘的面紗。

三、ES6 和 Babel

??ECMAScript6 實現(xiàn)了很多強大的新特性，借助 ES6 我們能用更加優(yōu)雅的方式完成許多強大的功能。只是鑒于許多老版本的瀏覽器尚未支持 ES6 語法，需要在使用之前轉換為 ES5 語法，以使其兼容更多的瀏覽器。而完成這些轉換工作的就是 Babel 了。
??Babel 本質就是一個 JavaScript 編譯器，通過：

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

將源代碼的 AST 結果一系列轉換生成目標代碼的 AST；

將目標代碼的 AST 轉換成 JavaScript 代碼。

??就可以完成 ES6 代碼到 ES5 代碼的轉換，當然轉換的過程會很復雜，我們在這里先了解一下基本的原理。想深入了解的同學可以通過開發(fā)自己的 Babel Plugin，熟悉 AST 的操作流程。

??Babel 本身的安裝使用是很簡單的，針對我們當前的應用，我們可以通過如下過程實現(xiàn)：

安裝 babel-core 包：cnpm i --save-dev babel-core；

新建一個 Babel 測試文件 babelTest.js 并使用 babel-core 轉換 ES6 代碼（我們使用了 ES6 的箭頭函數(shù)）：
babelTest.js

安裝上一步中使用的 babel-preset-env 和 babel-preset-stage-0 包：cnpm i --save-dev babel-preset-env babel-preset-stage-0；（babel-preset-env 是一個主流的 Babel 插件數(shù)組；Stage-X 是實驗階段的 Presets，）
TC39 將提案分為以下幾個階段:
Stage 0 - 稻草人: 只是一個想法，可能是 babel 插件。
Stage 1 - 提案: 初步嘗試。
Stage 2 - 初稿: 完成初步規(guī)范。
Stage 3 - 候選: 完成規(guī)范和瀏覽器初步實現(xiàn)。
Stage 4 - 完成: 將被添加到下一年度發(fā)布。

在當前目錄執(zhí)行 babelTest.js 文件：node babelTest.js，控制臺輸出信息：

可以看到我們的 ES6 箭頭函數(shù)被轉換為了 ES5的 "(function() {})"。

??了解了 Babel 的基本工作原理，現(xiàn)在讓我們用 ES6 的新特性，稍微改寫一下我們的 index.js：

index.js

??在這里我們用了 ES6 的模板字符串和箭頭函數(shù)。模板字符串通過用反引號（`）標識字符串，可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。
??在沒有配置 Babel 的情況下，我們通過 webpack 命令打包，可以發(fā)現(xiàn)生成的 test.js 文件還是用的 ES6 語法：

test.js

注：截圖部分是 test.js 的最后參數(shù)部分。

??下面讓我們看一下如何將 Babel 結合到 webpack 中，來實現(xiàn) ES6 代碼到 ES5 代碼的轉換。

四、webpack + Babel 構建 ES6 開發(fā)平臺

??既然要將 webpack 和 Babel 結合在一起，就需要在兩者之間建立一條紐帶，而通過 webpack 的 loaders 就可以生成這條紐帶，現(xiàn)在讓我們修改我們的 webpack.config.js 配置文件：

webpack.config.js

??可以看到我們在這里加了一段 module.rules 配置項，rules 數(shù)組里的每一項就是一條 loader 使用規(guī)則，loader 用于對不同類型文件的源代碼進行轉換，可以使你在 import 或"加載"模塊時預處理文件。
??現(xiàn)在我們配置的第一條規(guī)則，就是針對以 .js 結尾的文件使用 babel-loader。由于現(xiàn)在我們的項目中還不存在 babel-loader，讓我們先通過 cnpm 安裝該模塊： cnpm i --save-dev babel-loader。

??現(xiàn)在我們已經(jīng)準備好了 webpack、webpack 和 Babel 的紐帶，接下來就需要準備 Babel 的相關配置了。
??在上一節(jié)已經(jīng)介紹了多帶帶使用 Babel 的實現(xiàn)方法，但是在 webpack 中一般情況下我們不會主動調用 babel-core 解析 ES6 代碼，而是通過 babel-loader 在 webpack 編譯過程中自動解析 ES6 代碼。那么現(xiàn)在的問題就是在上一節(jié)使用 babel-core 的過程中，我們使用了 env 和 stage-0 兩個 preset，現(xiàn)在不使用 babel-core 了，這兩個 preset 又應該在哪里配置？
??這里我們有兩種方式可以實現(xiàn)上述配置：

使用 Babel 提供的方法：通過 Babel 目錄下的 .babelrc 配置文件完成配置（直接創(chuàng)建 .babelrc 文件可能會有命名規(guī)范的問題，可以通過 VS Code、Sublime 等編輯器創(chuàng)建該文件）。這里的 .babelrc 就類似于 webpack.config.js 的作用，只是 .babelrc 文件是在 babel-loader 執(zhí)行的過程中使用的。
.babelrc

使用 webpack 提供的方法：在 webpack.config.js 的 module.rules 規(guī)則中，我們還可以通過使用 loader 語法配置 Babel 的 presets：
webpack.config.js

??我們采用第一種方式配置 .babelrc 文件，項目目錄結構如下：

??現(xiàn)在讓我們在當前目錄下執(zhí)行 webpack 命令并查看生成的 test.js 文件，可以發(fā)現(xiàn)我們的 index.js 已經(jīng)被轉換成 ES5 代碼了：

??在瀏覽器中打開我們的 index.html，發(fā)現(xiàn)打包出來的 test.js 能正常工作：

??使用 webpack 搭建 ES6 編譯環(huán)境就講完了。下一章我們開始搭建一個 webpack 開發(fā)環(huán)境。（webpack 項目構建：（三）開發(fā)環(huán)境——本地服務器搭建）

源碼下載地址：https://github.com/xh4722/web...

參考資料：
ECMAScript 6入門（阮一峰）
babel-handbook
webpack 中文文檔
Babel中文網(wǎng)

云服務器 GPU云服務器 linux 編譯環(huán)境搭建 webpack搭建如何構建java項目 docker構建環(huán)境

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93193.html

webpack 項目構建：（三）開發(fā)環(huán)境——本地服務器搭建

摘要：上一章我們了解了的編譯環(huán)境搭建項目構建二編譯環(huán)境搭建這一章我們會結合的，介紹本地測試服務器的搭建過程。三開發(fā)環(huán)境有一些特性是專門用于開發(fā)環(huán)境的，可以幫助我們搭建一個更好的開發(fā)環(huán)境。我們可以通過配合使用來搭建本地服務。注：以下教程均在 windows 環(huán)境實現(xiàn)，使用其他操作系統(tǒng)的同學實踐過程可能會有些出入。 ??上一章我們了解了 webpack 的 ES6 編譯環(huán)境搭建：webpack...

tolerious 2019-08-22 15:10 評論0 收藏0
webpack 項目構建：（一）基本架構搭建

摘要：在下一個章節(jié)，我們會配合搭建一個可以用最新語法開發(fā)的平臺項目構建二編譯環(huán)境搭建。注：以下教程均在 windows 環(huán)境實現(xiàn)，使用其他操作系統(tǒng)的同學實踐過程可能會有些出入。一、準備工作安裝最新的 Node.js 環(huán)境；（官網(wǎng)地址：https://nodejs.org/zh-cn/）安裝 cnpm 淘寶npm鏡像；（在控制臺執(zhí)行命令：npm install -g cnpm --r...

voidking 2019-08-22 15:03 評論0 收藏0
ES6-開發(fā)環(huán)境搭建（1）

摘要：全局安裝本地安裝轉碼規(guī)則安裝完成后，我們可以看一下我們的文件，已經(jīng)多了選項。直接在線編譯提供一個在線編譯器，可以在線將代碼轉為代碼。古語有云：君子生非異也，善假于物；工欲善其事，必先利其器。由于有些低版本的瀏覽器還是不支持ES6語法，學習ES6，首先要學會搭建一個基本的ES6開發(fā)環(huán)境，利用工具，把ES6的語法轉變成ES5的語法。 1、使用Babel把ES6編譯成ES5 1...

android_c 2019-08-23 15:21 評論0 收藏0
vue學習系列（二）vue-cli

摘要：一介紹是官方提供的腳手架，用來快速建立項目。標識項目名稱，這個你可以根據(jù)自己的項目來起名字。初始化完成之后，進入安裝目錄，必須先安裝項目依賴，否則無法運行。源文件需要注意的是是入口文件，下的是路由文件，文件是組件文件。一.介紹 vue-cli是官方提供的腳手架，用來快速建立項目。二.安裝 npm install vue-cli -g//全局安裝三.初始化項目 vue init ...

baishancloud 2019-08-26 11:50 評論0 收藏0
vue-cli 項目結構

摘要：項目結構為我們搭建開發(fā)所需要的環(huán)境目錄結構及主要功能項目構建相關代碼生產(chǎn)環(huán)境構建代碼檢查等版本熱重載相關構建本地服務器構建工具相關基礎配置開發(fā)環(huán)境配置生產(chǎn)環(huán)境配置項目開發(fā)環(huán)境配置開發(fā)環(huán)境 Vue-cli 項目結構 vue-cli 為我們搭建開發(fā)所需要的環(huán)境目錄結構及主要功能 |-- build // 項目構建(webpack)...

int64 2019-08-21 17:40 評論0 收藏0