第三節：Babel的使用、Webpack集成Babel、單文件Vue打包

一. Babel的使用

1. 為什么要用babel？

　比如我們想使用ES6+的語法，想要使用TypeScript，但是很多舊瀏覽器又不支持這些新語法，這個時候就需要使用babel了。

　Babel是一個工具鏈，主要用於舊瀏覽器或者環境中將 ECMAScript 2015+ 代碼轉換為向后兼容版本的JavaScript；包括：語法轉換、源代碼轉換等。

2. babel的安裝使用

(1). 安裝

　這里以局部安裝為例，運行指令【npm install @babel/cli @babel/core -D】，其中：

　@babel/core：babel的核心代碼，必須安裝；
　@babel/cli：可以讓我們在命令行使用babel；

(2). 使用

　【npx babel test1/newjs --out-dir test1/oldjs】，表示將test1/newjs文件夾里的文件都轉換到test1/oldjs文件夾中。（ps: 該指令也可以直接定位到文件來轉換）

newjs文件夾里的ypf1.js文件如下：

// 需要將const 轉換成 var
const message = "Hello World";
const names = ["abc", "cba", "nba"];

names.forEach(item => console.log(item));    // 箭頭函數 轉成 function普通函數

結果：

　　轉換后的文件沒有任何變化，這是因為沒有安裝相關插件。

3. 插件的使用

　@babel/plugin-transform-arrow-functions ：轉換箭頭函數的插件。

　@babel/plugin-transform-block-scoping： 轉換const的插件

(1). 安裝兩個插件

　【npm install @babel/plugin-transform-arrow-functions -D】 【npm install @babel/plugin-transform-block-scoping -D】

(2). 運行指令進行轉換

　  【npx babel test1/newjs --out-dir test1/oldjs --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions】

轉換后的代碼如下：

// 需要將const 轉換成 var
var message = "Hello World";
var names = ["abc", "cba", "nba"];
names.forEach(function (item) {
  return console.log(item);
}); // 箭頭函數 轉成 function普通函數

4. babel的預設（推薦！！）

(1). 背景：

 　總不能有一種寫法就安裝一個轉換插件吧，太繁瑣，所以這里babel給預設，將常用的轉換都加在預設里。

(2). 使用

　A. 運行指令【npm install @babel/preset-env -D】，進行預設安裝。

　B. 運行指令【npx babel test1/newjs --out-dir test1/oldjs --presets=@babel/preset-env】，進行轉換。

5. babel的底層原理 

　我們可以將babel看成就是一個編譯器。Babel編譯器的作用就是將我們的源代碼，轉換成瀏覽器可以直接識別的另外一段源代碼；Babel編譯器也有三個階段：解析階段（Parsing）轉換階段（Transformation）生成階段（Code Generation)。

 

二. Webpack集成babel

1. 安裝babel-loader

　【npm install @babel/core -D】

　【npm install babel-loader -D】   

PS：babel-loader需要依賴 @babel/core。

2. 插件的模式配置

　安裝兩個插件：【npm install @babel/plugin-transform-arrow-functions -D】 【npm install @babel/plugin-transform-block-scoping -D】

　代碼配置：

            // babel轉換（插件模式）
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        plugins: [
                            "@babel/plugin-transform-arrow-functions",
                            "@babel/plugin-transform-block-scoping",
                        ]
                    }
                }
            }

 　將ypf1.js復制到src/js文件夾里，然后導入到main.js文件里。將babel配置中mode改為開發模式development，方便查看打包生成的源代碼。

運行指令【npm run build】，然后查看打包后的文件：均已轉換。

3. 預設的模式配置 （推薦）

　webpack提供一個preset，webpack會根據我們的預設來加載對應的插件列表，並且將其傳遞給babel。

　指令安裝預設組件：【npm install @babel/preset-env -D】

　配置文件：

            // babel轉換（預設模式）
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "@babel/preset-env"
                        ]
                    }
                }
            }

　然后運行進行打包，就自動轉換了，后面完全同上。　

 4. 單獨抽離babel配置文件

 　我們可以將babel的配置文件單獨拿出來，命名為：babel.config.js

webpack.config.js中代碼

    {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",                    
                }
     }

babel.config.js代碼如下： 

// 單獨抽離babel的配置文件，采用預設的模式
module.exports = {
  presets: [
    "@babel/preset-env"
  ]
}

 

三. 單文件Vue打包

1. 相關說明

(1). vue打包后不同版本解析

(2). 運行時+編譯器 vs 僅運行時

 

(3). 全局標識配置 

　下圖是兩個特性的標識，一個是使用Vue的Options，表示時候支持Vue2，一個是Production模式下是否支持devtools工具；雖然他們都有默認值，但是強烈建議我們手動對他們進行配置。

代碼配置： 借助DefinePlugin插件。

plugins: [new DefinePlugin({
            BASE_URL: "'./'",
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: false
        })
    ]

2. 實戰演練

(1). vue代碼准備

A. 安裝vue為生產依賴

【npm install vue@3.2.12】  (等價  【npm install vue@3.2.12 -S】)

B. 准備App.vue和HelloWorld.vue

 ① App.vue中調用HelloWorld

HelloWorld組件

<template>
    <h3>{{msg}}</h3>
</template>

<script>
    export default{
        data(){
            return{
                msg:'我是hello-world組件'
            }
        }
    }
</script>

<style>
</style>

App組件

<template>
    <div>
        <h3>我是vue單文件渲染出來了的</h3>
        <h3>{{msg}}</h3>
        <hello-world></hello-world>
    </div>
</template>

<script>
    // 導入組件
    import HelloWorld from './HelloWorld.vue'
    
    export default {
        components:{
            HelloWorld
        },
        data() {
            return {
                msg: "hello vue3"
            }
        }
    }
</script>

<style scoped="scoped">
    h3{
        color: cornflowerblue;
        font-weight: bold;
    }
</style>

 ② 在main.js中調用App.vue

// 調用vue相關
import {createApp} from 'vue';
import App from './vue/App.vue';

const app=createApp(App);
app.mount('#app');

(2). 相關配置

A. 安裝loader

【npm install vue-loader@16.5.0 -D 】

【npm install @vue/compiler-sfc@3.2.11 -D 】用於解析template。

B. babel相關配置 

（配置vue-loader 和 插件 VueLoaderPlugin）

// 這里必須通過 commonjs的寫法配置，不能寫 ES6的寫法
const { VueLoaderPlugin } = require('vue-loader/dist/index');

module.exports = {
    module: {
        rules: [// Vue解析打包
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    plugins: [

　　　　new VueLoaderPlugin()    
    ]
}

(3). 打包運行測試 

 運行指令【npm run build】，瀏覽器中運行如下圖：

 

 

 

 

 

!

• 作       者 : Yaopengfei(姚鵬飛)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 聲     明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
• 聲     明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。