使用 Webpack 與 Babel 配置 ES6 開發環境

kelvinlee 發布于2019-08-26 13:35 / 3144人閱讀

摘要：而是一個智能預設，允許您使用最新的，而無需微觀管理您的目標環境需要哪些語法轉換以及可選的瀏覽器。啟用將模塊語法轉換為其他模塊類型，設置為不會轉換模塊。最后，配置兼容的瀏覽器環境。

使用 Webpack 與 Babel 配置 ES6 開發環境 安裝 Webpack

安裝：

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

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

在項目根目錄下新建一個配置文件—— 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))

執行編譯打包命令，完成后打開 bundle.js 文件發現 isNull 和 unique 兩個函數沒有被編譯，和 webpack 官方說法一致：webpack 默認支持 ES6 模塊語法，要編譯 ES6 代碼依然需要 babel 編譯器。

安裝配置 Babel 編譯器

使用 Babel 必須先安裝 @babel/core 和 @babel/preset-env 兩個模塊，其中 @babel/core 是 Babel 的核心存在，Babel 的核心 api 都在這個模塊里面，比如：transform。而 @babel/preset-env 是一個智能預設，允許您使用最新的 JavaScript，而無需微觀管理您的目標環境需要哪些語法轉換（以及可選的瀏覽器polyfill）。因為這里使用的打包工具是 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 默認只轉換 ES6 新語法，不轉換新的 API，如：Set、Map、Promise等，所以需要安裝 @babel/polyfill 轉換新 API。安裝 @babel/plugin-transform-runtime 優化代碼，@babel/plugin-transform-runtime 是一個可以重復使用 Babel 注入的幫助程序代碼來節省代碼的插件。

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

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

修改 .babelrc 配置文件：

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

最后，配置兼容的瀏覽器環境。在 .babelrc 配置文件中設置 targets 屬性：

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

執行命令編譯代碼，完成后檢查 bundle.js 文件，是否成功轉換新 API 。如果發現以下代碼即說明轉換成功：

// 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);

其他關于 js 壓縮和 Webpack 啟用 tree shaking 功能的設置本文不在贅述。

配置文件詳情概覽

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 項目是本人最近建設的開源項目，歡迎感興趣的同行交流。

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

云服務器 GPU云服務器開發環境配置 php開發環境使用 cdn環境搭建與配置 python開發環境配置

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

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

webpack 項目構建：（二）ES6 編譯環境搭建

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

marser 2019-08-22 15:08 評論0 收藏0
ES6-開發環境搭建（1）

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

android_c 2019-08-23 15:21 評論0 收藏0
webpack多頁應用架構系列（八）：教練我要寫ES6！webpack怎么整合Babel？

摘要：本文首發于的技術博客實用至上，非經作者同意，請勿轉載。只是最近學習生態，用起來轉換之余，也不免碰到諸多用上的教程案例，因此便稍作學習。在當前的瀏覽器市場下，想在生產環境用上，是必不可少的。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000006992218如果您對本系列文章感興...

gnehc 2019-08-20 11:14 評論0 收藏0
webpack 大法好 ---- 基礎概念與配置（1）

摘要：不信你命令行里敲個試試敲敲敲當然了想直接運行命令，你需要將添加到系統變量啊。全局安裝相同的，運行命令耐心等待安裝完成后，你的系統變量里就存在命令了，你可以運行下試試。上訴如果有不懂的，歡迎留言。再一次見面！ Light 還是太太太懶了，距離上一篇沒啥營養的文章已經過去好多天。今天為大家介紹介紹 webpack 最基本的概念，以及簡單的配置，讓你能快速得搭建一個可用的 webpack ...

QLQ 2019-08-20 14:41 評論0 收藏0
Webpack系列——手把手教你使用Webpack搭建簡易的React開發環境

摘要：在這篇文章中我們開始利用我們之前所學搭建一個簡易的開發環境，用以鞏固我們之前學習的知識。文章首發于我的github及個人博客，github請看https://github.com/huruji/blo...，轉載請注明出處。在這篇文章中我們開始利用我們之前所學搭建一個簡易的React開發環境，用以鞏固我們之前學習的Webpack知識。首先我們需要明確這次開發環境需要達到的效果：1、...

cucumber 2019-08-22 11:06 評論0 收藏0