Babel常用的插件

1. @babel-plugin-dynamic-import-node
- 作用：在开发环境下解决vue热加载编译速度慢的问题。
2. @babel/plugin-syntax-dynamic-import
- 作用：懒加载引入动态文件。
3. @babel/plugin-proposal-object-rest-spread
- 作用：插件会将类中的属性编译
- 参数 loose
4. @babel-plugin-transform-vue-jsx
- 作用: Vue中的渲染函数可以支持JSX语法

1. @babel-plugin-dynamic-import-node

作用：在开发环境下解决vue热加载编译速度慢的问题。

安装插件

npm install babel-plugin-dynamic-import-node

修改babel.config.js文件

module.exports = {presets: ['@vue/app'],env: {development: {plugins: ['dynamic-import-node']}}
}

2. @babel/plugin-syntax-dynamic-import

作用：懒加载引入动态文件。

安装插件

npm install babel-plugin-dynamic-import-webpack --save-dev

修改babel.config.js文件

module.exports = {'presets': ['@vue/app'],'plugins': [['component',{'libraryName': 'element-ui','styleLibraryName': 'theme-chalk'},'syntax-dynamic-import']]
}

特别注意"syntax-dynamic-import"在plugins中的顺序。plugins[0][1]必须是对象或者undefinde或者null。如果syntax-dynamic-import 位置放的不对将会报错

3. @babel/plugin-proposal-object-rest-spread

作用：插件会将类中的属性编译

参数 loose

boolean, 默认是false
当为false的时候, 属性会通过Object.defineProperty的方式为对象赋值, 为true的时候, 直接通过点语法赋值。

// 功能
// 源码
class A{foo!: stringbar: string = "bar";static rogen = "rogen";
}
//参数 loose = true 编译后得效果
class A{construtor(){this.foo = void 0 this.bar = 'bar'}
}
A.rogen = 'rogen'// 参数 loose = false 编译后得效果function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }class A{construtor(){_defineProperty(this, "bar", "rogen");_defineProperty(this, "foo", void 0);}
}
_defineProperty(A, "rogen", "rogen");

4. @babel-plugin-transform-vue-jsx

作用: Vue中的渲染函数可以支持JSX语法

JSX是JavaScript语法扩展

Babel常用的插件相关推荐

常用Maven插件介绍（上）
转自 : http://www.infoq.com/cn/news/2011/04/xxb-maven-7-plugin 我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务, ...
如何在Pycham中安装插件，以及Pycham中常用的插件
欢迎大家关注笔者,你的关注是我持续更博的最大动力原创文章,转载告知,盗版必究文章目录:如何在Pycham中安装插件,以及Pycham中常用的插件 1.在Pycham中安装插件 1.1 直接安装 1 ...
【Android 插件化】插件化技术弊端 ( 恶意插件化程序的解决方向 | 常用的插件化虚拟引擎 )
文章目录一.插件化技术弊端二.恶意插件化程序的解决方向三.常用的插件化虚拟引擎一.插件化技术弊端在之前的 Android 应用中 , 部分黑客将应用破解 , 植入自己的恶意代码 , 然后进行 ...
ae万能弹性表达式_外置常用ae插件快速掌握AE软件的精髓
相信经常用ae软件的小伙伴就知道,AE的强大之处就在于它的插件,它就像一个巨型的加工厂.所以,AE插件在AE软件的使用中是必不可少的. 鉴于AE插件的种类繁多,为了让影视后期爱好者在后续学习AE软件 ...
ps ico插件_常用 PS 插件合集（1）
强大的图像处理软件 Photoshop 有着海量不错的插件今天就向大家介绍几个常用的吧! 一.磨皮滤镜--Imagenomic Portraiture 这是个强大的磨皮插件可以设置细节平滑,肤色蒙 ...
Maven实战——常用Maven插件介绍
http://www.infoq.com/cn/news/2011/04/xxb-maven-7-plugin 我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任 ...
maven 常用的插件
我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...
常用Maven插件介绍（下）（转）
我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...
如何给Xcode添加我们常用的插件呢?
为什么80%的码农都做不了架构师?>>> 如何给Xcode添加我们常用的插件呢? 下面用我们常用的一个快速添加注释的插件来举例:{VVDocumenter-Xcode} 1.首 ...

Babel常用的插件

Babel常用的插件

1. @babel-plugin-dynamic-import-node

作用：在开发环境下解决vue热加载编译速度慢的问题。

2. @babel/plugin-syntax-dynamic-import

作用：懒加载引入动态文件。

3. @babel/plugin-proposal-object-rest-spread

作用：插件会将类中的属性编译

参数 loose

4. @babel-plugin-transform-vue-jsx

作用: Vue中的渲染函数可以支持JSX语法

Babel常用的插件相关推荐

最新文章

热门文章