webpack4系列教程（七）：使用 babel-loader

mingde 發(fā)布于2019-08-23 14:43 / 1521人閱讀

摘要：然而，瀏覽器對這些高級語法的支持性并不是非常好。是一個編譯器，能夠讓我們放心的使用新一代語法。在中使用安裝修改，加入新的遇到文件就先用處理，表示排除文件夾中的文件。

1. 什么是Babel

如今 ES6 語法在開發(fā)中已經(jīng)非常普及，甚至也有許多開發(fā)人員用上了 ES7 或 ES8 語法。然而，瀏覽器對這些高級語法的支持性并不是非常好。因此為了讓我們的新語法能在瀏覽器中都能順利運行，Babel 應運而生。
Babel是一個JavaScript編譯器，能夠讓我們放心的使用新一代JS語法。比如我們的箭頭函數(shù)：

() => console.log("hello babel")

經(jīng)過Babel編譯之后：

(function(){
    return console.log("hello babel");
});

會編譯成瀏覽器可識別的ES5語法。

2. 在webpack中使用babel-loader

安裝：

npm install -D babel-loader @babel/core @babel/preset-env webpack

修改 webpack.config.js，加入新的loader：

{
    test: /.js$/,
    loader: "babel-loader",
    exclude: /node_modules/
}

遇到JS文件就先用babel-loader處理，exclude表示排除 node_modules 文件夾中的文件。loader的配置就OK了，可是這樣還不能發(fā)揮Babel的作用。在項目根目錄下創(chuàng)建一個 .babelrc 文件，添加代碼：

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

我們還希望能夠在項目對一些組件進行懶加載，所以還需要一個Babel插件：

npm i babel-plugin-syntax-dynamic-import -D

在 .babelrc 文件中加入plugins配置：

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "syntax-dynamic-import"
  ]
}

在src 目錄下創(chuàng)建 helper.js：

console.log("this is helper")

再來修改我們的 main.js ：

import "babel-polyfill"
import Modal from "./components/modal/modal"
import "./assets/style/common.less"
import _ from "lodash"
const App = function () {
  let div = document.createElement("div")
  div.setAttribute("id", "app")
  document.body.appendChild(div)
  let dom = document.getElementById("app")
  let modal = new Modal()
  dom.innerHTML = modal.template({
    title: "標題",
    content: "內(nèi)容",
    footer: "底部"
  })
  let button = document.createElement("button")
  button.innerText = "click me"
  button.onclick = () => {
    const help = () => import("./helper")
    help()
  }
  document.body.appendChild(button)
}
const app = new App()
console.log(_.camelCase("Foo Bar"))

當button點擊時，加載 helper 然后調(diào)用。打包之后可見：

多了一個 3.bundle.js，在瀏覽器打開 dist/index.html ，打開 network查看，3.bundle.js并未加載：

當點擊button之后，發(fā)現(xiàn)瀏覽器請求了3.bundle.js，控制臺也打印出了數(shù)據(jù)。

由于 Babel 只轉(zhuǎn)換語法(如箭頭函數(shù))， 你可以使用 babel-polyfill 支持新的全局變量，例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。

安裝：

npm install --save-dev babel-polyfill

在入口文件引入就可以了：

import "babel-polyfill"

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

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

webpack4系列教程（十）：總結

摘要：傳送門系列教程一初識系列教程二創(chuàng)建項目，打包第一個文件系列教程三自動生成項目中的文件系列教程四處理項目中的資源文件一系列教程五處理項目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開發(fā)環(huán)境和生產(chǎn)環(huán)境在前端開發(fā)日益復雜的今天，我們需要一個工具來幫助我們管理項目資源，打包、編譯、預處理、后處理等等。webpack的出現(xiàn)無疑是前端開發(fā)者的福音，我的博文只...

hqman 2019-08-26 13:29 評論0 收藏0
webpack4 系列教程(二): 編譯 ES6

摘要：今天介紹怎么編譯的各種函數(shù)和語法。對于相關的匹配規(guī)則，除了匹配結尾的文件，還應該去除文件夾下的第三庫的文件發(fā)布前已經(jīng)被處理好了。它需要在我們項目的入口文件中被引入，或者在中配置。個人網(wǎng)站原文鏈接系列教程二編譯今天介紹webpack怎么編譯ES6的各種函數(shù)和語法。敲黑板：這是webpack4版本哦, 有一些不同于webpack3的地方。 >>> 本節(jié)課源碼 >>> 所有課程源碼 1....

graf 2019-08-23 10:34 評論0 收藏0
webpack4 系列教程(七): SCSS提取和懶加載

摘要：教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請移步原文系列教程七提取和懶加載。個人技術小站有空就來看看我一直都在本節(jié)課講解在中的提取和懶加載。值得一提的是，和在的懶加載上的處理方法有著巨大差別。教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步>>> （原文）webpack4 系列教程(七): SCSS 提取和懶加載。個人技術小站: https://godbmw.c...

崔曉明 2019-08-23 11:39 評論0 收藏0
webpack4詳細教程，從無到有搭建react腳手架（二）

摘要：相關鏈接詳細教程，從無到有搭建腳手架一配置插件，這兩個插件基本上是必配的了介紹每次打包時清理上次打包生成的目錄官網(wǎng)指南關于這個插件部分內(nèi)容已經(jīng)過時沒有更新，按照官網(wǎng)配置會出錯，所以參考上這個插件文檔來配置，文檔地址生成打相關鏈接 webpack4詳細教程，從無到有搭建react腳手架（一）配置插件 clean-webpack-plugin、 html-webpack-plugin...

cuieney 2019-08-23 18:35 評論0 收藏0
webpack-demos：全網(wǎng)最貼心webpack系列教程和配套代碼

摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關注個人技術博客。所以我花費了個多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼歡迎關注個人技術博客：godbmw.com。每周 1 篇原創(chuàng)技術分享！開源教程(webpack、設計模式）、面試刷題（偏前...

LMou 2019-08-23 12:25 評論0 收藏0