成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack - babel配置

yunhao / 2781人閱讀

摘要：配置是一個編譯器，是前端開發(fā)中的一個利器。其中，插件是為了告訴只編譯批準的內(nèi)容，相當于及最新版本。安裝用法將下面內(nèi)容添加到文件中更多細節(jié)參考插件。

webpack - babel配置

babel是一個javascript編譯器，是前端開發(fā)中的一個利器。它突破了瀏覽器實現(xiàn)es標準的限制，使我們在開發(fā)中可以使用最新的javascript語法。

通過構(gòu)建和babel，可以使用最新js語法進行開發(fā)，最后自動編譯成用于瀏覽器或node環(huán)境的代碼。

webpack中使用babel

配合webpack使用babel前，需要首先使用npm init初始化一個項目，npm install -g webpack安裝webpack（全局安裝是為了在命令行使用webpack命令）。

安裝babel-loader, babel-core, babel-preset-env。

npm install --save-dev babel-loader babel-core babel-preset-env
其中，babel-preset-env插件是為了告訴babel只編譯批準的內(nèi)容，相當于babel-preset-es2015, es2016, es2017及最新版本。通過它可以使用最新的js語法。

配置webpack.config.js

在webpack配置文件中配置bable-loader

module: {
    rules: [
        {
            test: /.js$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        ["env",{
                            targets: {
                                browsers: ["> 1%", "last 2 versions"]
                            }
                        }]
                    ]
                }
            },
            exclude: "/node_modules/"
        }
    ]
}

其中，exclude是定義不希望babel處理的文件。targets是presets的一些預設(shè)選項，這里表示將js用于瀏覽器，只確保占比大于1%的瀏覽器的特性，主流瀏覽器的最新兩個主版本。
更多與配置有關(guān)的信息，可以參考：
babel env preset設(shè)置,
browserlist預設(shè)置.

在命令行中運行相應webpack命令即可。

由于babel-preset配置選項較多，我們一般可以在根目錄下建立.babelrc文件，專門用來放置babel preset配置，這是一個json文件。可以將上述配置修改如下：

//.bablerc文件
{
    "presets": [
        ["env",{
            "targets": {
                "browsers": ["> 1%", "last 2 versions"]
            }
        }]
    ]
}

//原webpack.config.js文件
module: {
    rules: [
        {
            test: /.js$/,
            use: {
                loader: "babel-loader"
            },
            exclude: "/node_modules/"
        }
    ]
}
babel-polifill插件

在上面的babel配置中，babel只是將一些es6，es7-8的語法轉(zhuǎn)換成符合目標的js代碼，但是如果我們使用一些特性或方法，比如Generator, Set, 或者一些方法。babel并不能轉(zhuǎn)換為低版本瀏覽器識別的代碼。這時就需要babel-polifill。

簡單的說，polifill就是一個墊片，提供了一些低版本es標準對高級特性的實現(xiàn)。使用polifill的方法如下：

npm install --save babel-polifill

然后在應用入口引入polifill，要確保它在任何其他代碼/依賴聲明前被調(diào)用。

//CommonJS module
require("babel-polyfill");

//es module
import "babel-polifill";

在webpack.config.js中，將babel-polifill加入entry數(shù)組中：

entry: ["babel-polifill", "./app.js"]

相比于runtime-transform，polifill用于應用開發(fā)中。會添加相應變量到全局，所以會污染全局變量。

更多細節(jié)參考babel-polifill。

runtime-transform插件

runtime transform也是一個插件，它與polifill有些類似，但它不污染全局變量，所以經(jīng)常用于框架開發(fā)。

安裝：
npm install --save-dev babel-plugin-transform-runtime

npm install --save babel-runtime

用法：
將下面內(nèi)容添加到.bablerc文件中

{
    "plugins": ["transform-runtime"]
}

更多細節(jié)參考bable-runtime-transform插件。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93954.html

相關(guān)文章

  • 使用 webpack 4 和 Babel 7 構(gòu)建 React 應用及如何引入 Material D

    摘要：建立項目首先，創(chuàng)建工程目錄現(xiàn)在我們已經(jīng)創(chuàng)建了我們要開發(fā)應用程序的文件夾，接著需要添加一個文件。這里為了版本的一致性，我把里的版本號前面刪除了。為此，需要創(chuàng)建一個名為的文件，用來配置。 showImg(https://segmentfault.com/img/bVboiHi?w=1000&h=625); 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ 在過去的一年和...

    asoren 評論0 收藏0

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

    摘要：本質(zhì)就是一個編譯器，通過將源代碼解析成抽象語法樹將源代碼的結(jié)果一系列轉(zhuǎn)換生成目標代碼的將目標代碼的轉(zhuǎn)換成代碼。項目構(gòu)建三開發(fā)環(huán)境本地服務(wù)器搭建源碼下載地址參考資料入門阮一峰中文文檔中文網(wǎng) 注：以下教程均在 windows 環(huán)境實現(xiàn)，使用其他操作系統(tǒng)的同學實踐過程可能會有些出入。 ??在上一章 webpack 項目構(gòu)建：（一）基本架構(gòu)搭建 我們搭建了一個最基本的 webpack 項目，現(xiàn)...

    marser 評論0 收藏0

  • webpack配置 babel

    摘要：三集成所需要的依賴和在或加載模塊時，對代碼進行預處理，語法轉(zhuǎn)化為語法。到目前位置，用于開發(fā)應用的環(huán)境已經(jīng)配置好了。 本系列主要學習webpack的配置。webpack自己間接的用過不少次，但是自己配置卻沒多少次，所以特地寫寫文章，學習webpack的配置，有不恰當?shù)牡胤?，歡迎指正。這次配置 babel 。 若你對webpack的概念還不了解，先查看相應文檔webpack中文文檔 一、初...

    Songlcy 評論0 收藏0

  • Webpack入門到精通（1）

    前言 什么是webpack 本質(zhì)上，webpack 是一個現(xiàn)代 JavaScript 應用程序的靜態(tài)模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。 webpack 有哪些功能(代碼轉(zhuǎn)換 文件優(yōu)化 代碼分割 模塊合并 ...

    SunZhaopeng 評論0 收藏0

  • Webpack入門到精通（1）

    前言 什么是webpack 本質(zhì)上，webpack 是一個現(xiàn)代 JavaScript 應用程序的靜態(tài)模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。webpack 有哪些功能(代碼轉(zhuǎn)換 文件優(yōu)化 代碼分割 模塊合并 自...

    wangbinke 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<