使用 Webpack 與 Babel 配置 ES6 開(kāi)發(fā)環(huán)境

kelvinlee 發(fā)布于2019-08-26 13:35 / 3151人閱讀

摘要：而是一個(gè)智能預(yù)設(shè)，允許您使用最新的，而無(wú)需微觀管理您的目標(biāo)環(huán)境需要哪些語(yǔ)法轉(zhuǎn)換以及可選的瀏覽器。啟用將模塊語(yǔ)法轉(zhuǎn)換為其他模塊類型，設(shè)置為不會(huì)轉(zhuǎn)換模塊。最后，配置兼容的瀏覽器環(huán)境。

使用 Webpack 與 Babel 配置 ES6 開(kāi)發(fā)環(huán)境 安裝 Webpack

安裝：

# 本地安裝
$ npm install --save-dev webpack webpack-cli

# 全局安裝
$ npm install -g webpack webpack-cli

在項(xiàng)目根目錄下新建一個(gè)配置文件—— webpack.config.js 文件：

const path = require("path");

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

在 src 目錄下新建 a.js 文件：

export const isNull = val => val === null

export const unique = arr => [...new Set(arr)]

在 src 目錄下新建 index.js 文件：

import { isNull, unique } from "./a.js"

const arr = [1, 1, 2, 3]

console.log(unique(arr))
console.log(isNull(arr))

執(zhí)行編譯打包命令，完成后打開(kāi) bundle.js 文件發(fā)現(xiàn) isNull 和 unique 兩個(gè)函數(shù)沒(méi)有被編譯，和 webpack 官方說(shuō)法一致：webpack 默認(rèn)支持 ES6 模塊語(yǔ)法，要編譯 ES6 代碼依然需要 babel 編譯器。

安裝配置 Babel 編譯器

使用 Babel 必須先安裝 @babel/core 和 @babel/preset-env 兩個(gè)模塊，其中 @babel/core 是 Babel 的核心存在，Babel 的核心 api 都在這個(gè)模塊里面，比如：transform。而 @babel/preset-env 是一個(gè)智能預(yù)設(shè)，允許您使用最新的 JavaScript，而無(wú)需微觀管理您的目標(biāo)環(huán)境需要哪些語(yǔ)法轉(zhuǎn)換（以及可選的瀏覽器polyfill）。因?yàn)檫@里使用的打包工具是 Webpack，所以還需要安裝 babel-loader 插件。

安裝：

$ npm install --save-dev @babel/core @babel/preset-env babel-loader

新建 .babelrc 文件：

{
  "presets": [
    "@babel/preset-env"
  ]
}

修改 webpack 配置文件（webpack.config.js）：

const path = require("path");

module.exports = {
  mode: "none",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /.js$/,
          loader: "babel-loader",
          exclude: /node_modules/
      }
    ]
  }
}

由于 babel 默認(rèn)只轉(zhuǎn)換 ES6 新語(yǔ)法，不轉(zhuǎn)換新的 API，如：Set、Map、Promise等，所以需要安裝 @babel/polyfill 轉(zhuǎn)換新 API。安裝 @babel/plugin-transform-runtime 優(yōu)化代碼，@babel/plugin-transform-runtime 是一個(gè)可以重復(fù)使用 Babel 注入的幫助程序代碼來(lái)節(jié)省代碼的插件。

安裝 @babel/polyfill、@babel/plugin-transform-runtime 兩個(gè)插件：

$ npm install --save-dev @babel/polyfill @babel/plugin-transform-runtime

修改 .babelrc 配置文件：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage", // 在每個(gè)文件中使用polyfill時(shí)，為polyfill添加特定導(dǎo)入。利用捆綁器只加載一次相同的polyfill。
      "modules": false // 啟用將ES6模塊語(yǔ)法轉(zhuǎn)換為其他模塊類型，設(shè)置為false不會(huì)轉(zhuǎn)換模塊。
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "helpers": false
    }]
  ]
}

最后，配置兼容的瀏覽器環(huán)境。在 .babelrc 配置文件中設(shè)置 targets 屬性：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "modules": false,
      "targets": {
        "browsers": "last 2 versions, not ie <= 9"
      }
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "helpers": false
    }]
  ]
}

執(zhí)行命令編譯代碼，完成后檢查 bundle.js 文件，是否成功轉(zhuǎn)換新 API 。如果發(fā)現(xiàn)以下代碼即說(shuō)明轉(zhuǎn)換成功：

// 23.2 Set Objects
module.exports = __webpack_require__(80)(SET, function (get) {
  return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); };
}, {
  // 23.2.3.1 Set.prototype.add(value)
  add: function add(value) {
    return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value);
  }
}, strong);

其他關(guān)于 js 壓縮和 Webpack 啟用 tree shaking 功能的設(shè)置本文不在贅述。

配置文件詳情概覽

package.json 文件：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-transform-runtime": "^7.3.4",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.3.4",
    "babel-loader": "^8.0.5",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

webpack.config.js 文件：

const path = require("path");

module.exports = {
  mode: "none",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /.js$/,
          loader: "babel-loader",
          exclude: /node_modules/
      }
    ]
  }
}

.babelrc 文件：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "modules": false,
      "targets": {
        "browsers": "last 2 versions, not ie <= 9"
      }
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "helpers": false
    }]
  ]
}

符錄

usuallyjs 項(xiàng)目是本人最近建設(shè)的開(kāi)源項(xiàng)目，歡迎感興趣的同行交流。

usuallyjs: https://github.com/JofunLiang/usuallyjs

云服務(wù)器 GPU云服務(wù)器開(kāi)發(fā)環(huán)境配置 php開(kāi)發(fā)環(huán)境使用 cdn環(huán)境搭建與配置 python開(kāi)發(fā)環(huán)境配置

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

kelvinlee

男|高級(jí)講師

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

TA的文章

項(xiàng)目六：定時(shí)器一產(chǎn)生PWM控制舵機(jī)

閱讀 949·2021-09-07 09:58
庫(kù)克退休前的最后一戰(zhàn)：不是蘋(píng)果汽車(chē)！

閱讀 1496·2021-09-07 09:58
我這里有一些好康的！杰哥不要啊~【淺析C語(yǔ)言程序環(huán)境】

閱讀 2892·2021-09-04 16:40
胡子哥的重學(xué)前端（筆記）css語(yǔ)法

閱讀 2511·2019-08-30 15:55
前端每日實(shí)戰(zhàn)：70# 視頻演示如何用純 CSS 創(chuàng)作一只徘徊的果凍怪獸

閱讀 2419·2019-08-30 15:54
錨點(diǎn)偏移

閱讀 1376·2019-08-30 15:52
【Hello CSS】第一章-CSS的語(yǔ)法與工作流

閱讀 441·2019-08-30 10:49
前端開(kāi)發(fā)周報(bào)：JavaScript編程術(shù)語(yǔ)和web圖片優(yōu)化

閱讀 2612·2019-08-29 13:21

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

資訊專欄INFORMATION COLUMN

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

使用 Webpack 與 Babel 配置 ES6 開(kāi)發(fā)環(huán)境

相關(guān)文章

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

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

webpack多頁(yè)應(yīng)用架構(gòu)系列（八）：教練我要寫(xiě)ES6！webpack怎么整合Babel？

webpack 大法好 ---- 基礎(chǔ)概念與配置（1）

***Webpack系列——手把手教你使用Webpack搭建簡(jiǎn)易的React開(kāi)發(fā)環(huán)境***

發(fā)表評(píng)論

0條評(píng)論

kelvinlee

男|高級(jí)講師

TA的文章

項(xiàng)目六：定時(shí)器一產(chǎn)生PWM控制舵機(jī)

庫(kù)克退休前的最后一戰(zhàn)：不是蘋(píng)果汽車(chē)！

我這里有一些好康的！杰哥不要啊~【淺析C語(yǔ)言程序環(huán)境】

胡子哥的重學(xué)前端（筆記）css語(yǔ)法

前端每日實(shí)戰(zhàn)：70# 視頻演示如何用純 CSS 創(chuàng)作一只徘徊的果凍怪獸

錨點(diǎn)偏移

【Hello CSS】第一章-CSS的語(yǔ)法與工作流

前端開(kāi)發(fā)周報(bào)：JavaScript編程術(shù)語(yǔ)和web圖片優(yōu)化

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用 Webpack 與 Babel 配置 ES6 開(kāi)發(fā)環(huán)境

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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