为什么要使用babel插件?

首先要了解babel插件是干嘛的,随着js的语法规范发展,出现了越来越多的高级语法,但是使用webpack打包的时候,webpack并不能全部理解这些高级语法,需要我们使用一些插件来把高级语法,转为低级语法后打包。babel就是将高级语法转为低级语法的工具。

不使用babel会遇到的问题

我们是用class语法来创建一个简单的类:

使用webpack打包,会报错如下:

解决webpack无法正确解析es6问题:

  1. 安装babel和相关的loader

    • 在webpack中需要安装两套包:

      • 第一套包:cnpm install babel-core babel-loader babel-plugin-transform-runtime -D
      • 第二套包:cnpm install bebel-preset-env babel-preset-stage-0 -D
  2. 打开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文件转化完毕了,项目也无法正常运行

  3. 在项目的根目录中,新建一个叫做 .babelrc的babel配置文件,这个配置文件,属于JSON格式,所以在写 .babelrc配置的时候,必须符合JSON语法规范:不能写注释,字符串必须用双引号

    • 在 .babelrc 写如下的配置:大家可以把preset翻译成【语法】的意思
{
"presets" : ["env","stage-0"],
"plugins" : ["transform-runtime"]
}

  1. 了解我们安装的babel-preset-env,是比较新的es语法,之前安装的babel-preset-es2015,现在出了一个更新的语法插件,叫做babel-preset-env,包含了所有的和es相关的语法
  2. 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插件的使用的更多相关文章

  1. webpack进阶之插件篇

    一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...

  2. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  3. webpack中babel配置 --- runtime-transform和babel-pollfill

    webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...

  4. 从AST编译解析谈到写babel插件

    之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abs ...

  5. (15/24) 为webpack增加babel支持

    Babel是什么? Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译达到以下目的: 使用下一代的javaScript代码(ES6,ES7-.),即使这些标准目前并未被当前 ...

  6. webpack快速入门——插件配置:HTML文件的发布

    1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-web ...

  7. webpack快速入门——给webpack增加babel支持

    1.Babel的安装与配置 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个 你需要的功能或拓展,你都需要安 ...

  8. webpack 编译ES6插件babel-loader

    1.安装babel-loader 参考:http://babeljs.io/docs/setup/#installation 进入项目目录执行安装命名: npm install --save-dev ...

  9. vue 项目中 自定义 webpack 的 配置文件(webpack.config.babel.js)

    webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path ...

随机推荐

  1. 微信小程序-工具的下载与安装

    QQ讨论群:785071190 安装开发工具 前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 <开发者工具介绍> .工具安装非常 ...

  2. 谈谈java中的并发(一)

    一.并发的定义 并发:对于这个概念一直就是没怎么搞懂,就是感觉特别的生疏,(自己从从字面上理解就是多个东西,一起出发),所以就上网上查了一些资料: 同时拥有两个或多个线程,如果程序在单核处理器上运行, ...

  3. 【Python】使用Selenium实现淘宝抢单

    最近,小明为了达成小姐姐的愿望,在某宝买到心仪的宝贝,再加上又迷上了python,就通过python轻而易举地实现了(个人声明:对Java来说,这并不是背叛). 需求分析&前期准备 需求其实很 ...

  4. Spring IoC BeanDefinition 的加载和注册

    前言 本系列全部基于 Spring 5.2.2.BUILD-SNAPSHOT 版本.因为 Spring 整个体系太过于庞大,所以只会进行关键部分的源码解析. 本篇文章主要介绍 Spring IoC 容 ...

  5. MySQL一招入门

    连接mysql数据库命令:mysql -u root -p 创建mysql数据库:create databaase xx库; 创建mysql表: create table db_xx表( id int ...

  6. electron打造桌面应用

    Electron 将网页打包成桌面应用(web页面生成exe) http://m.blog.csdn.net/u014563989/article/details/75045052 Electron学 ...

  7. c# 线程的优先级

    前言 有时候我们希望某个线程更加重要,希望让其先运行的话.c#为我们提供了线程修改优先级.但是这样的效果有多大呢? 正文 直接放代码: static void Main(string[] args) ...

  8. 112买卖股票的最佳时机II

    from typing import List# 这道题和上一题很类似,但有一些不同,每天都可以买入,或者卖出# 那么利润最大化,就是i + 1 天的价格比i天的价格高的时候买入# 然后在i + 1天 ...

  9. 洛谷 P6136 【【模板】普通平衡树(数据加强版)】

    爱死替罪羊树了 这种暴力的数据结构爱死了.什么?!你还不知道替罪羊树?那就看看这篇博客这篇博客吧.替罪羊树就是当不平衡时,拍扁重建,然后就平衡了.想切这道题,要先把普通平衡树那道题做了(这篇博客讲了的 ...

  10. js/ts/tsx读取excel表格中的日期格式转换

    const formatDate = (timestamp: number) => { const time = new Date((timestamp - 1) * 24 * 3600000 ...