資訊專欄INFORMATION COLUMN
摘要：然而，瀏覽器對(duì)這些高級(jí)語(yǔ)法的支持性并不是非常好。是一個(gè)編譯器，能夠讓我們放心的使用新一代語(yǔ)法。在中使用安裝修改，加入新的遇到文件就先用處理，表示排除文件夾中的文件。
1. 什么是Babel
如今 ES6 語(yǔ)法在開發(fā)中已經(jīng)非常普及，甚至也有許多開發(fā)人員用上了 ES7 或 ES8 語(yǔ)法。然而，瀏覽器對(duì)這些高級(jí)語(yǔ)法的支持性并不是非常好。因此為了讓我們的新語(yǔ)法能在瀏覽器中都能順利運(yùn)行，Babel 應(yīng)運(yùn)而生。
Babel是一個(gè)JavaScript編譯器，能夠讓我們放心的使用新一代JS語(yǔ)法。比如我們的箭頭函數(shù)：
() => console.log("hello babel")
經(jīng)過Babel編譯之后：
(function(){
return console.log("hello babel");
});
會(huì)編譯成瀏覽器可識(shí)別的ES5語(yǔ)法。
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的作用。在項(xiàng)目根目錄下創(chuàng)建一個(gè) .babelrc 文件，添加代碼：
{
"presets": [
"@babel/preset-env"
]
}
我們還希望能夠在項(xiàng)目對(duì)一些組件進(jìn)行懶加載，所以還需要一個(gè)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: "標(biāo)題",
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"))
當(dāng)button點(diǎn)擊時(shí)，加載 helper 然后調(diào)用。打包之后可見：
多了一個(gè) 3.bundle.js，在瀏覽器打開 dist/index.html ，打開 network查看，3.bundle.js并未加載：
當(dāng)點(diǎn)擊button之后，發(fā)現(xiàn)瀏覽器請(qǐng)求了3.bundle.js，控制臺(tái)也打印出了數(shù)據(jù)。
由于 Babel 只轉(zhuǎn)換語(yǔ)法(如箭頭函數(shù))， 你可以使用 babel-polyfill 支持新的全局變量，例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。
安裝：
npm install --save-dev babel-polyfill
在入口文件引入就可以了：
import "babel-polyfill"
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101043.html
摘要：傳送門系列教程一初識(shí)系列教程二創(chuàng)建項(xiàng)目，打包第一個(gè)文件系列教程三自動(dòng)生成項(xiàng)目中的文件系列教程四處理項(xiàng)目中的資源文件一系列教程五處理項(xiàng)目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開發(fā)環(huán)境和生產(chǎn)環(huán)境 在前端開發(fā)日益復(fù)雜的今天，我們需要一個(gè)工具來幫助我們管理項(xiàng)目資源，打包、編譯、預(yù)處理、后處理等等。webpack的出現(xiàn)無(wú)疑是前端開發(fā)者的福音，我的博文只...
摘要：今天介紹怎么編譯的各種函數(shù)和語(yǔ)法。對(duì)于相關(guān)的匹配規(guī)則，除了匹配結(jié)尾的文件，還應(yīng)該去除文件夾下的第三庫(kù)的文件發(fā)布前已經(jīng)被處理好了。它需要在我們項(xiàng)目的入口文件中被引入，或者在中配置。個(gè)人網(wǎng)站原文鏈接系列教程二編譯 今天介紹webpack怎么編譯ES6的各種函數(shù)和語(yǔ)法。敲黑板：這是webpack4版本哦, 有一些不同于webpack3的地方。 >>> 本節(jié)課源碼 >>> 所有課程源碼 1....
摘要：教程所示圖片使用的是倉(cāng)庫(kù)圖片，網(wǎng)速過慢的朋友請(qǐng)移步原文系列教程七提取和懶加載。個(gè)人技術(shù)小站有空就來看看我一直都在本節(jié)課講解在中的提取和懶加載。值得一提的是，和在的懶加載上的處理方法有著巨大差別。 教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過慢的朋友請(qǐng)移步>>> （原文）webpack4 系列教程(七): SCSS 提取和懶加載。 個(gè)人技術(shù)小站: https://godbmw.c...
摘要：相關(guān)鏈接詳細(xì)教程，從無(wú)到有搭建腳手架一配置插件，這兩個(gè)插件基本上是必配的了介紹每次打包時(shí)清理上次打包生成的目錄官網(wǎng)指南關(guān)于這個(gè)插件部分內(nèi)容已經(jīng)過時(shí)沒有更新，按照官網(wǎng)配置會(huì)出錯(cuò)，所以參考上這個(gè)插件文檔來配置，文檔地址生成打 相關(guān)鏈接 webpack4詳細(xì)教程，從無(wú)到有搭建react腳手架（一） 配置插件 clean-webpack-plugin、 html-webpack-plugin...
摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前...
閱讀 1386·2019-08-30 15:44
閱讀 2139·2019-08-30 11:04
閱讀 550·2019-08-29 15:17
閱讀 2580·2019-08-26 12:12
閱讀 3158·2019-08-23 18:09
閱讀 946·2019-08-23 15:37
閱讀 1555·2019-08-23 14:43
閱讀 2956·2019-08-23 13:13
