webpack4 系列教程(二): 编译 ES6
今天介绍
webpack
怎么编译ES6
的各种函数和语法。敲黑板:这是webpack4
版本哦, 有一些不同于webpack3
的地方。
1. 了解babel
说起编译es6
,就必须提一下babel
和相关的技术生态:
babel-loader
: 负责 es6 语法转化babel-preset-env
: 包含 es6、7 等版本的语法转化规则babel-polyfill
: es6 内置方法和函数转化垫片babel-plugin-transform-runtime
: 避免 polyfill 污染全局变量
需要注意的是, babel-loader
和babel-polyfill
。前者负责语法转化,比如:箭头函数;后者负责内置方法和函数,比如:new Set()
。
2. 安装相关库
这次,我们的package.json
文件配置如下:
{
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"webpack": "^4.15.1"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"babel-runtime": "^6.26.0"
}
}
3. webpack
中使用babel
babel
的相关配置,推荐单独写在.babelrc
文件中。下面,我给出这次的相关配置:
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions"]
}
}
]
],
"plugins": ["transform-runtime"]
}
在webpack
配置文件中,关于babel
的调用需要写在module
模块中。对于相关的匹配规则,除了匹配js
结尾的文件,还应该去除node_module/
文件夹下的第三库的文件(发布前已经被处理好了)。
module.exports = {
entry: {
app: "./app.js"
},
output: {
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader"
}
}
]
}
};
4. 最后:babel-polyfill
我们发现整个过程中并没有使用babel-polyfill
。它需要在我们项目的入口文件中被引入,或者在webpack.config.js
中配置。这里我们采用第一种方法编写app.js
:
import "babel-polyfill";
let func = () => {};
const NUM = 45;
let arr = [1, 2, 4];
let arrB = arr.map(item => item * 2);
console.log(arrB.includes(8));
console.log("new Set(arrB) is ", new Set(arrB));
命令行中进行打包,然后编写html
文件引用打包后的文件即可在不支持es6
规范的老浏览器中看到效果了。
5. 相关资料
- polyfill 引入:https://www.babeljs.cn/docs/usage/polyfill/
- babel-preset-env 配置:https://www.babeljs.cn/docs/plugins/preset-env/
欢迎技术交流,引用请注明出处。
个人网站:Yuan Xin
原文链接:webpack4 系列教程(二): 编译 ES6
webpack4 系列教程(二): 编译 ES6的更多相关文章
- webpack4 系列教程(十二):处理第三方JavaScript库
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十二):处理第三方 JavaScript 库>原文地址.或者来我的小站看更多内容:godbm ...
- webpack4 系列教程(一): 打包JS
webpack 本身就是为了打包js所设计,作为第一节,介绍怎么打包js. 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD. 创建vendor文件夹,其中mi ...
- webpack4 系列教程: 前言
1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码.多平台兼容.而最重要的是,它为前端工程化提供了最好支持.vue.react等大型 ...
- CRL快速开发框架系列教程二(基于Lambda表达式查询)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- NGUI系列教程二
接下来我们创建一个Label,NGUI->Open the Widget Wizard,打开widgetTool对话框,在Template中选择Label,确定AddTo右侧选项为panel,点 ...
- webpack4 系列教程(十四):Clean Plugin and Watch Mode
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十四):Clean Plugin and Watch Mode>原文地址.更欢迎 ...
- webpack4 系列教程(六): 处理SCSS
这节课讲解webpack4中处理scss.只需要在处理css的配置上增加编译scss的 LOADER 即可.了解更多处理css的内容 >>> >>> 本节课源码 & ...
- webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载
本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...
- C#微信公众号开发系列教程二(新手接入指南)
http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可 ...
随机推荐
- req、js
requests库中,可不写为headers内各键值对的部分参数: s=requests.Session() #或.session() s.allow_redirects=False #禁止重定 ...
- kaldi脚本注释一
utils/split_data.sh ##再$data文件夹下,创建split{num_split}文件夹,再split×里面创建所有的数字文件夹#后面基本上是把$data文件夹下的各个文件都进行s ...
- linux下编写C++程序播放音频
参考: https://blog.csdn.net/zlyaxixuexi/article/details/79014441 格式转换: https://www.media.io/zh/
- Autowired byType 与 byName 策略
@Autowired是spring的注解,默认使用的是byType的方式向Bean里面注入相应的Bean.例如: @Autowiredprivate UserService userService;这 ...
- web.xml简介
用于配置Web应用的相关信息,如:监听器(listener).过滤器(filter). Servlet.相关参数.会话超时时间.安全验证方式.错误页面等.例如: Servlet 3中的异步处理指的是什 ...
- Fiddler怎样抓取手机的包
Fiddler作为代理服务器,可以拦截到手机发出的请求,再经过Fiddler发送到服务器,获取到服务器响应的数据,这个过程,只要设置配置好了,使用过程不受影响. 要想抓取到手机的包,先要给手机设置一个 ...
- __getattr__()
定义了__getattr__(),当访问object不存在的属性时会调用该方法 不定义访问不存在的属性时会报 AttributeError eg: class Cat(object): def __i ...
- 基于httpclient的效率优化
1.背景 我们有个业务,会调用其他部门提供的一个基于http的服务,日调用量在千万级别.使用了httpclient来完成业务.之前因为qps上不去,就看了一下业务代码,并做了一些优化,记录在这里. 先 ...
- Spark SQL读取hive数据时报找不到mysql驱动
Exception: Caused by: org.datanucleus.exceptions.NucleusException: Attempt to invoke the "BoneC ...
- android底部菜单栏的编写
开发工具android stdio,组件Radio Button 1.新建空项目DDDD 2.将事先准备好的图标复制到对应的文件夹中(如图),这五个文件夹都要拷进去,图标文件http://pan.ba ...