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. 1018 Public Bike Management (30 分)

    There is a public bike service in Hangzhou City which provides great convenience to the tourists fro ...

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

    PTA数据结构与算法题目集(中文)  7-31 7-31 笛卡尔树 (25 分)   笛卡尔树是一种特殊的二叉树,其结点包含两个关键字K1和K2.首先笛卡尔树是关于K1的二叉搜索树,即结点左子树的所有 ...

  3. Redis 笔记(三)—— LIST 常用命令

    常用命令 命令 用例和描述 RPUSH RPUSH key value [value ...] —— 将一个或多个值推入列表的右端 LPUSH LPUSH key value [value ...] ...

  4. python3的subprocess的各个方法的区别(-)

    subprocess(python3.7) subprocess 主要是为了替换一下的模块函数,允许你执行一些命令,并获取返回的状态码和 输入,输出和错误信息. os.systemos.spawn* ...

  5. go 锁和sync包

    一.什么是锁? sync.Mutex 是一个互斥锁,它的作用是守护在临界区入口来确保同一时间只能有一个线程进入临界区 在 sync 包中还有一个 RWMutex 锁:他能通过 RLock() 来允许同 ...

  6. wireshark抓包实战(六),过滤器

    目录 一.抓包过滤器 1.语法来源 2.语法 二.显示过滤器 1.语法来源 2.关键要素 wireshark中,过滤器有两种,一种是抓包过滤器,一种是显示过滤器! 抓包过滤器适合大网络环境,配置与抓包 ...

  7. MySQL5.7使用Notifier启动、停止服务时出现的问题

    1.选择右击右下角 MySQL Notifier ,选择 Actions -> Manage Monitored Items 2.选择当前的服务 MySQL57  并进行删除 3.然后点击  a ...

  8. nginx内置高可用配置与第三方高可用模块nginx_ustream_check_mudule配置

    1. nginx 第三方高可用模块 IP 备注 10.0.0.63 proxy 10.0.0.64 web1 10.0.0.65 web2 这里会讲解一些nignx常用高可用方案,以及引入第三方高可用 ...

  9. vue-cli3 按需引入 element-ui 报错

    报错信息: Cannot find module 'babel-preset-es2015' from .... 解决办法: 安装最新的 Babel 编译插件:@babel/preset-env 修改 ...

  10. 记录d3.js 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置

    项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...