详解webpack运行Babel教程
摘要:Babel是转码器,webpack是打包工具,它们应该如何一起使用呢?
GitHub仓库: Fundebug/webpack-babel-tutorial
ES6 + IE10 = 语法错误!
setTimeout(() => { console.log("Hello, Fundebug!"); }, 100)
由于低版本的浏览器没有支持ES6语法,这就意味着代码会出错。例如,在IE 10浏览器中,会出现”语法错误”:
如果你使用了Fundebug错误监控服务,则会收到这样的报错:
直接使用babel转码
当你使用更高版本的JavaScript语法时,比如ES7,低版本的浏览器将无法运行。为了兼容低版本的浏览器,比如万恶的IE,我们不得不使用Babel ,将ES6、ES7等高版本代码转换为ES5代码。
安装 babel-cli
sudo npm install --global babel-cli
使用babel命令转码
babel test.js --out-file compiled.js
转码之后生成的代码为compiled.js :
setTimeout(function () { console.log("Hello, Fundebug!"); }, 100);
可知,箭头函数转换成了function,这样就代码可以在IE 10等不支持ES6的浏览器上正确执行了。
广告:欢迎免费试用Fundebug,助您第一时间发现代码BUG。
使用webpack运行Babel
一般项目中都会使用 webpack 对代码进行打包,比如,将多个js文件打包成1个js文件,这样可以减少前端的资源请求。因此,我们需要将Babel也集成到webpack中。
安装webpack
npm install --global webpack
我使用的webpack版本为4.10.0
webpack --version 4.10.0
安装babel
npm install --save-dev babel-cli babel-preset-env
babel-preset-env 是Babel新版的preset,它可以让我们 灵活地设置代码目标执行环境 ,比如只支持各个浏览器最新的2个版本,支持IE8及其以上的IE浏览器。
安装babel-loader
npm install --save-dev babel-loader
babel-loader 是webpack的babel插件,它让我们可以在wepback中运行Babel。
配置babel
新增 .babelrc 文件:
{ "presets": ["env"] }
配置webpack
新增 webpack.config.js 文件:
module.exports = { entry: './test.js', output: { path: __dirname, filename: 'bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }] } };
可知,我们在webpack中使用了babel-loader插件来运行Babel,转换所有的.js代码(除了node_modules中的代码)。
使用webpack运行babel
webpack --mode production
转换之后的代码为bundle.js 。bundle.js只有1行代码,这是因为为我们指定的mode为production,webpack为了压缩代码只生成了1行代码。
参考
webpack 配合babel 将es6转成es5 超简单实例
babel-preset-env: a preset that configures Babel for you
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaWeb - Filter 和 Listener
- Python入门系列第一章--第二节:我的第一个Python项目
- Python入门系列第二章--第二节:注释
- JavaScript进阶教程(4)-函数内this指向解惑call(),apply(),bind()的区别
- 第三章--第一节:条件判断语句
- 用 Python 实现朋友圈中的九宫格图片
- 第三章--第二节:循环语句
- 第三章--第三节:列表
- 第三章--第三节(补充):列表排序
- 第三章--第四节:字典
- 2020最新Android面筋:太难了!历经一周对接6个面试官后,我的头条Offer终于来了!
- 第三章--第五节:集合
- Python 爬虫超详细讲解(零基础入门,老年人都看的懂)
- JavaWeb - Linux Operating System
- 第三章--第六节:元祖