babel

链接地址

在index.js中写入js6的语法如

let fn = (){
console.log('this is es6')
}

执行npm run build

在打包出来的js文件中搜索fn会看到如下片段结果mode状态为development

fn = ()=>{\r\n    console.log(\"this is es6\")\r\n}\r\nfn()\r\n\n\n//# sourceURL=webpack:///./src/index.js?")

可以看到箭头函数依旧以箭头函数的方式输出,而没有以es5的方式输出

接下来安装babel-loader

npm install -D babel-loader @babel/core @babel/preset-env webpack

在module rules中进行配置

{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}, }
]
}

再次打包,执行后在js文件中查看fn可以发现如下代码

fn = function fn() {\n  console.log(\"this is es6\");\n};\n\nfn();\n\n//# sourceURL=webpack:///./src/index.js?")

可见此时的箭头函数已经被转化为es5的语法了

在src下将要打包的js文件中写如下高级语法

class Test{
a = 11
}

打包时发现报错并且出现以下提示

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

也就是下载安装

npm i @babel/plugin-proposal-class-properties -D

接着重新进行配置

{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] ,
plugins:[
'@babel/plugin-proposal-class-properties'
]
}, }
]
}
``

webpack3 babel相关的更多相关文章

  1. Babel 相关资料

    Babel online editor Babel Plugin Handbook babeljs usage options

  2. Babel知识点相关

    本篇是根据最新babel 7版本写的,里面用到的一些babel相关包都是babel 7的     1,babel是如何工作的 babel是一个转译器,这里我严格区分了转译器和编译器,因为编译器最终生成 ...

  3. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  4. [vue]webpack3最佳实践篇

    vue-render: https://www.cnblogs.com/iiiiiher/articles/9465311.html es6模块的导入导出 https://www.cnblogs.co ...

  5. 使用Webpack和Babel来搭建React应用程序

    用Webpack(npm install -g webpack)代码打包,Webpack大致需要知道三件事: 1)让Webpack知道应用程序或js文件的根目录 2)让Webpack知道做何种转换 3 ...

  6. 《前端之路》之 Babel 下一代 JavaScript 语法编译器

    写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...

  7. Babel插件开发入门指南

    文章概览 主要包括:Babel如何进行转码.插件编写的入门基础.实例讲解如何编写插件. 阅读本文前,需要读者对Babel插件如何使用.配置有一定了解,可以参考笔者之前的文章. 本文所有例子可以在 笔者 ...

  8. 关于babel官网的学习

    提起babel,前端er大概都不陌生.但是为什么要有babel呢?解决了什么问题?怎么使用babel呢?注意点在哪?以下就从这几个方面总结一下我关于babel学习的结果吧. 为什么要有babel呢? ...

  9. webpack相关配置

    cd 项目文件夹 npm init -y npm install jquery -S //生成node_modules 下载好jquery 创建webpack.config.js module.exp ...

随机推荐

  1. Java复合优先于继承

    复合优于继承 继承打破了封装性(子类依赖父类中特定功能的实现细节) 合理的使用继承的情况: 在包内使用 父类专门为继承为设计,并且有很好的文档说明,存在is-a关系 只有当子类真正是父类的子类型时,才 ...

  2. js函数简单调用

    <script> //最简单的调用 //这是JavaScript DOM编程艺术(第2版)关于函数的原码 function convertToCelsius(temp) { var res ...

  3. Vim查找与替换命令大全,功能完爆IDE!

    Vi/Vim 可以说是文本编辑中的一代传奇人物,直至现在,它仍然在高级程序员的武器库中占有一席之地.每个 Linux 发行版默认都包含Vim ,而且即使你不是 Linux 系统用户,你也可以安装 Vi ...

  4. C#通用类库整理--日志记录

    日志的记录是将程序过程中的一些行为数据记录下来,方便开发.运维迅速的找到问题的所在,节省时间.使用时在 站点的web.config 中的<appSettings></appSetti ...

  5. PTA数据结构与算法题目集(中文) 7-24

    PTA数据结构与算法题目集(中文)  7-24 7-24 树种统计 (25 分)   随着卫星成像技术的应用,自然资源研究机构可以识别每一棵树的种类.请编写程序帮助研究人员统计每种树的数量,计算每种树 ...

  6. Redis 笔记(五)—— HASH 常用命令

    添加和删除键值对的散列操作 命令 用例和描述 HMGET HMGET key-name key [key ...] —— 从散列里面获取一个或多个键的值 HMSET HMSET key-name ke ...

  7. 【php】PDO

    一.PDO的定义 1.pdo(php data object)是一个数据库的抽象层 二.PDO的特点 1.跨数据库 2.支持预处理 3.支持事务处理 三.PDO的使用 1.基本使用 (1)实例化pdo ...

  8. 原生js,jquery通过ajax获得后台json数据动态新增页面元素

    一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

  9. go For-range结构

    For结构: for 初始化;条件语句;修饰语句{ 输出 } 一.For-range结构是可以怎么用? 这种构建方法可以应用于数组和切片: for ix, value := range slice1 ...

  10. Java第十三天,内部类

    内部类 一.①成员内部类.②局部内部类(包含③匿名内部类) 1.内部类用外部类属性和方法的时候,可以随意进行访问. 2.外部类用内部类属性和方法的时候,需要通过内部类对象访问. 3.在编译成class ...