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

mingde 发布于2019-08-23 14:43 / 1520人阅读

摘要：然而，浏览器对这些高级语法的支持性并不是非常好。是一个编译器，能够让我们放心的使用新一代语法。在中使用安装修改，加入新的遇到文件就先用处理，表示排除文件夹中的文件。

1. 什么是Babel

如今 ES6 语法在开发中已经非常普及，甚至也有许多开发人员用上了 ES7 或 ES8 语法。然而，浏览器对这些高级语法的支持性并不是非常好。因此为了让我们的新语法能在浏览器中都能顺利运行，Babel 应运而生。
Babel是一个JavaScript编译器，能够让我们放心的使用新一代JS语法。比如我们的箭头函数：

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

经过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了，可是这样还不能发挥Babel的作用。在项目根目录下创建一个 .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 目录下创建 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: "内容",
    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 然后调用。打包之后可见：

多了一个 3.bundle.js，在浏览器打开 dist/index.html ，打开 network查看，3.bundle.js并未加载：

当点击button之后，发现浏览器请求了3.bundle.js，控制台也打印出了数据。

由于 Babel 只转换语法(如箭头函数)， 你可以使用 babel-polyfill 支持新的全局变量，例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。

安装：

npm install --save-dev babel-polyfill

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

import "babel-polyfill"

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101043.html

webpack4系列教程（十）：总结

摘要：传送门系列教程一初识系列教程二创建项目，打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境在前端开发日益复杂的今天，我们需要一个工具来帮助我们管理项目资源，打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音，我的博文只...

hqman 2019-08-26 13:29 评论0 收藏0
webpack4 系列教程(二): 编译 ES6

摘要：今天介绍怎么编译的各种函数和语法。对于相关的匹配规则，除了匹配结尾的文件，还应该去除文件夹下的第三库的文件发布前已经被处理好了。它需要在我们项目的入口文件中被引入，或者在中配置。个人网站原文链接系列教程二编译今天介绍webpack怎么编译ES6的各种函数和语法。敲黑板：这是webpack4版本哦, 有一些不同于webpack3的地方。 >>> 本节课源码 >>> 所有课程源码 1....

graf 2019-08-23 10:34 评论0 收藏0
webpack4 系列教程(七): SCSS提取和懒加载

摘要：教程所示图片使用的是仓库图片，网速过慢的朋友请移步原文系列教程七提取和懒加载。个人技术小站有空就来看看我一直都在本节课讲解在中的提取和懒加载。值得一提的是，和在的懒加载上的处理方法有着巨大差别。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步>>> （原文）webpack4 系列教程(七): SCSS 提取和懒加载。个人技术小站: https://godbmw.c...

崔晓明 2019-08-23 11:39 评论0 收藏0
webpack4详细教程，从无到有搭建react脚手架（二）

摘要：相关链接详细教程，从无到有搭建脚手架一配置插件，这两个插件基本上是必配的了介绍每次打包时清理上次打包生成的目录官网指南关于这个插件部分内容已经过时没有更新，按照官网配置会出错，所以参考上这个插件文档来配置，文档地址生成打相关链接 webpack4详细教程，从无到有搭建react脚手架（一）配置插件 clean-webpack-plugin、 html-webpack-plugin...

cuieney 2019-08-23 18:35 评论0 收藏0
webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0