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

資訊專欄INFORMATION COLUMN

webpack配置 babel

Songlcy / 2465人閱讀

摘要：三集成所需要的依賴和在或加載模塊時，對代碼進行預(yù)處理，語法轉(zhuǎn)化為語法。到目前位置，用于開發(fā)應(yīng)用的環(huán)境已經(jīng)配置好了。

本系列主要學習webpack的配置。webpack自己間接的用過不少次，但是自己配置卻沒多少次，所以特地寫寫文章，學習webpack的配置，有不恰當?shù)牡胤剑瑲g迎指正。這次配置 babel 。

若你對webpack的概念還不了解，先查看相應(yīng)文檔webpack中文文檔

一、初始化一個webpack項目 
npm init -y                     // 初始化項目，會添加一個package.json
npm install --save-dev webpack  // 下載webpack，并記錄到package.json的devDependencies中
二、新建webpack.config.js文件

指定入口和出口。

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  mode:"development"
};

當前項目目錄為

dist            // 手動新建，因出口指定為此文件夾。
 |---index.html
src
 |---index.js
package-lock.json
package.json
webpack.config.json
三、集成babel

所需要的依賴：babel-loader、babel-core、babel-preset-env、babel-polyfill、babel-runtime和babel-plugin-transform-runtime

babel-loader：在import或加載模塊時，對es6代碼進行預(yù)處理，es6語法轉(zhuǎn)化為es5語法。
babel-core：允許我們?nèi)フ{(diào)用babel的api，可以將js代碼分析成ast（抽象語法樹），方便各個插件分析語法進行相應(yīng)的處理.
babel-preset-env：指定規(guī)范，比如es2015，es2016，es2017，latest，env（包含前面全部）
babel-polyfill：它效仿一個完整的ES2015+環(huán)境，使得我們能夠使用新的內(nèi)置對象比如 Promise，靜態(tài)方法比如Array.from 或者 Object.assign, 實例方法比如 Array.prototype.includes 和生成器函數(shù)（提供給你使用 regenerator 插件）。為了達到這一點， polyfill 添加到了全局范圍，就像原生類型比如 String 一樣。
babel-runtime babel-plugin-transform-runtime：與babel-polyfill作用一樣，使用場景不一樣。

為了更簡單明了，把依賴的安裝分開，不一次性安裝所有依賴。

1、安裝babel-loader和babel-core 
npm install --save-dev babel-loader babel-core

在webpack.config.js中添加

module: {
    rules: [
      {
        test: /.js$/, exclude: /node_modules/, loader: "babel-loader"
        // test 符合此正則規(guī)則的文件，運用 loader 去進行處理，除了exclude 中指定的內(nèi)容
      }
    ]
  }
2、安裝babel-preset-env 
npm install babel-preset-env --save-dev

新建 .babelrc 文件

//babelrc
{
  "presets": ["env"]
}
3、安裝babel-polyfill

此依賴用于開發(fā)應(yīng)用，會在全局添加新的方法，會污染全變量。

npm install --save babel-polyfill

在入口文件本文為index.js的頂部添加

import "babel-polyfill"

在webpcak.config.js中將babel-polyfill添加到entry數(shù)組中

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  ...

最終webpack.config.js為

const path = require("path");

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  mode:"development",
  module: {
    rules: [
      {
        test: /.js$/, exclude: /node_modules/, loader: "babel-loader"
        // test 符合此正則規(guī)則的文件，運用 loader 去進行處理，除了exclude 中指定的內(nèi)容
      }
    ]
  }
};

項目目錄為

dist            // 手動新建，因出口指定為此文件夾。
 |---index.html
src
 |---index.js
.babelrc
package-lock.json
package.json
webpack.config.json

到目前位置，用于開發(fā)應(yīng)用的babel環(huán)境已經(jīng)配置好了。
執(zhí)行

npx webpack --config webpack.config.js

便可在dist中看到打包出來的bundle.js文件

4.babel-runtime 和 babel-plugin-transform-runtime

如果你不是開發(fā)應(yīng)用，而是開發(fā)提供給第三方利用的框架的話，將第3步的polyfill改為這兩個依賴。它們在局部添加新方法，不污染全局變量

npm install --save-dev babel-runtime babel-plugin-transform-runtime

.babelrc文件

{
  "presets": ["env"],
  "plugins": ["transform-runtime"]
}

用于開發(fā)框架的babel環(huán)境已經(jīng)配置好，
同樣執(zhí)行

npx webpack --config webpack.config.js

便可在dist中看到打包出來的bundle.js文件

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

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

相關(guān)文章

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

    摘要：建立項目首先，創(chuàng)建工程目錄現(xiàn)在我們已經(jīng)創(chuàng)建了我們要開發(fā)應(yīng)用程序的文件夾，接著需要添加一個文件。這里為了版本的一致性，我把里的版本號前面刪除了。為此，需要創(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配置

    摘要：配置是一個編譯器，是前端開發(fā)中的一個利器。其中，插件是為了告訴只編譯批準的內(nèi)容，相當于及最新版本。安裝用法將下面內(nèi)容添加到文件中更多細節(jié)參考插件。 webpack - babel配置 babel是一個javascript編譯器，是前端開發(fā)中的一個利器。它突破了瀏覽器實現(xiàn)es標準的限制，使我們在開發(fā)中可以使用最新的javascript語法。 通過構(gòu)建和babel，可以使用最新js語法進行...

    yunhao 評論0 收藏0

  • Webpack入門到精通（1）

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

    SunZhaopeng 評論0 收藏0

  • Webpack入門到精通（1）

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

    wangbinke 評論0 收藏0

發(fā)表評論

0條評論

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