(6)webpack使用babel插件的使用
为什么要使用babel插件?
首先要了解babel插件是干嘛的,随着js的语法规范发展,出现了越来越多的高级语法,但是使用webpack打包的时候,webpack并不能全部理解这些高级语法,需要我们使用一些插件来把高级语法,转为低级语法后打包。babel就是将高级语法转为低级语法的工具。
不使用babel会遇到的问题
我们是用class语法来创建一个简单的类:
使用webpack打包,会报错如下:
解决webpack无法正确解析es6问题:
安装babel和相关的loader
- 在webpack中需要安装两套包:
- 第一套包:
cnpm install babel-core babel-loader babel-plugin-transform-runtime -D
- 第二套包:
cnpm install bebel-preset-env babel-preset-stage-0 -D
- 第一套包:
- 在webpack中需要安装两套包:
打开webpack的配置文件,在module节点下的rules数组中,添加一个新的匹配规则:
{test:/\.js$/, use:'babel-loader', exclude:/node_modules/}
- 注意:在配置babel的loader规则的时候,必须把node_modules目录,通过exclude选项排除掉,原因有两:
- 如果不排除node_modules,则babel会把node_modules中所有的第三方js文件,都打包编译,这样非常消耗cpu且打包速度慢
- 哪怕最终babel把所有的node_modules中的js文件转化完毕了,项目也无法正常运行
在项目的根目录中,新建一个叫做 .babelrc的babel配置文件,这个配置文件,属于JSON格式,所以在写 .babelrc配置的时候,必须符合JSON语法规范:不能写注释,字符串必须用双引号
- 在 .babelrc 写如下的配置:大家可以把preset翻译成【语法】的意思
{
"presets" : ["env","stage-0"],
"plugins" : ["transform-runtime"]
}
- 了解我们安装的babel-preset-env,是比较新的es语法,之前安装的babel-preset-es2015,现在出了一个更新的语法插件,叫做babel-preset-env,包含了所有的和es相关的语法
npm run dev
之后,就可以看到已经正确运行
打包过程中遇到的问题:
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
错误原因:是当前的babel-loader和babel不匹配,安装babel-loader@7即可。
解决办法:cnpm install babel-loader@7
(6)webpack使用babel插件的使用的更多相关文章
- webpack进阶之插件篇
一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- webpack中babel配置 --- runtime-transform和babel-pollfill
webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...
- 从AST编译解析谈到写babel插件
之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abs ...
- (15/24) 为webpack增加babel支持
Babel是什么? Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译达到以下目的: 使用下一代的javaScript代码(ES6,ES7-.),即使这些标准目前并未被当前 ...
- webpack快速入门——插件配置:HTML文件的发布
1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-web ...
- webpack快速入门——给webpack增加babel支持
1.Babel的安装与配置 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个 你需要的功能或拓展,你都需要安 ...
- webpack 编译ES6插件babel-loader
1.安装babel-loader 参考:http://babeljs.io/docs/setup/#installation 进入项目目录执行安装命名: npm install --save-dev ...
- vue 项目中 自定义 webpack 的 配置文件(webpack.config.babel.js)
webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path ...
随机推荐
- 微信小程序-工具的下载与安装
QQ讨论群:785071190 安装开发工具 前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 <开发者工具介绍> .工具安装非常 ...
- 谈谈java中的并发(一)
一.并发的定义 并发:对于这个概念一直就是没怎么搞懂,就是感觉特别的生疏,(自己从从字面上理解就是多个东西,一起出发),所以就上网上查了一些资料: 同时拥有两个或多个线程,如果程序在单核处理器上运行, ...
- 【Python】使用Selenium实现淘宝抢单
最近,小明为了达成小姐姐的愿望,在某宝买到心仪的宝贝,再加上又迷上了python,就通过python轻而易举地实现了(个人声明:对Java来说,这并不是背叛). 需求分析&前期准备 需求其实很 ...
- Spring IoC BeanDefinition 的加载和注册
前言 本系列全部基于 Spring 5.2.2.BUILD-SNAPSHOT 版本.因为 Spring 整个体系太过于庞大,所以只会进行关键部分的源码解析. 本篇文章主要介绍 Spring IoC 容 ...
- MySQL一招入门
连接mysql数据库命令:mysql -u root -p 创建mysql数据库:create databaase xx库; 创建mysql表: create table db_xx表( id int ...
- electron打造桌面应用
Electron 将网页打包成桌面应用(web页面生成exe) http://m.blog.csdn.net/u014563989/article/details/75045052 Electron学 ...
- c# 线程的优先级
前言 有时候我们希望某个线程更加重要,希望让其先运行的话.c#为我们提供了线程修改优先级.但是这样的效果有多大呢? 正文 直接放代码: static void Main(string[] args) ...
- 112买卖股票的最佳时机II
from typing import List# 这道题和上一题很类似,但有一些不同,每天都可以买入,或者卖出# 那么利润最大化,就是i + 1 天的价格比i天的价格高的时候买入# 然后在i + 1天 ...
- 洛谷 P6136 【【模板】普通平衡树(数据加强版)】
爱死替罪羊树了 这种暴力的数据结构爱死了.什么?!你还不知道替罪羊树?那就看看这篇博客这篇博客吧.替罪羊树就是当不平衡时,拍扁重建,然后就平衡了.想切这道题,要先把普通平衡树那道题做了(这篇博客讲了的 ...
- js/ts/tsx读取excel表格中的日期格式转换
const formatDate = (timestamp: number) => { const time = new Date((timestamp - 1) * 24 * 3600000 ...