webpack4系列教程(七):使用 babel-loader

栏目: 编程语言 · 发布时间: 5年前

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

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 然后调用。打包之后可见:

webpack4系列教程(七):使用 babel-loader

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

webpack4系列教程(七):使用 babel-loader

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

webpack4系列教程(七):使用 babel-loader

webpack4系列教程(七):使用 babel-loader

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

安装:

npm install --save-dev babel-polyfill

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

import 'babel-polyfill'

本人才疏学浅,不当之处欢迎批评指正。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

图解CIO工作指南(第4版)

图解CIO工作指南(第4版)

[日] 野村综合研究所系统咨询事业本部 / 周自恒 / 人民邮电出版社 / 2014-3 / 39.00

《图解CIO工作指南(第4版)》是一本实务手册,系统介绍了企业运用IT手段提高竞争力所必需的管理方法和实践经验,主要面向CEO或CIO等企业管理人士。 《图解CIO工作指南(第4版)》分为三个部分。第1部分的主题为IT管理,着重阐述运用IT技术提高企业竞争力所必需的所有管理业务,具体包括制定作为企业方针的IT战略,以及统筹执行该战略时与IT相关的人力、物力、财力、风险等要素在内的一系列管理业......一起来看看 《图解CIO工作指南(第4版)》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

html转js在线工具
html转js在线工具

html转js在线工具