webpack3 babel相关
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相关的更多相关文章
- Babel 相关资料
Babel online editor Babel Plugin Handbook babeljs usage options
- Babel知识点相关
本篇是根据最新babel 7版本写的,里面用到的一些babel相关包都是babel 7的 1,babel是如何工作的 babel是一个转译器,这里我严格区分了转译器和编译器,因为编译器最终生成 ...
- 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...
- [vue]webpack3最佳实践篇
vue-render: https://www.cnblogs.com/iiiiiher/articles/9465311.html es6模块的导入导出 https://www.cnblogs.co ...
- 使用Webpack和Babel来搭建React应用程序
用Webpack(npm install -g webpack)代码打包,Webpack大致需要知道三件事: 1)让Webpack知道应用程序或js文件的根目录 2)让Webpack知道做何种转换 3 ...
- 《前端之路》之 Babel 下一代 JavaScript 语法编译器
写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...
- Babel插件开发入门指南
文章概览 主要包括:Babel如何进行转码.插件编写的入门基础.实例讲解如何编写插件. 阅读本文前,需要读者对Babel插件如何使用.配置有一定了解,可以参考笔者之前的文章. 本文所有例子可以在 笔者 ...
- 关于babel官网的学习
提起babel,前端er大概都不陌生.但是为什么要有babel呢?解决了什么问题?怎么使用babel呢?注意点在哪?以下就从这几个方面总结一下我关于babel学习的结果吧. 为什么要有babel呢? ...
- webpack相关配置
cd 项目文件夹 npm init -y npm install jquery -S //生成node_modules 下载好jquery 创建webpack.config.js module.exp ...
随机推荐
- Java复合优先于继承
复合优于继承 继承打破了封装性(子类依赖父类中特定功能的实现细节) 合理的使用继承的情况: 在包内使用 父类专门为继承为设计,并且有很好的文档说明,存在is-a关系 只有当子类真正是父类的子类型时,才 ...
- js函数简单调用
<script> //最简单的调用 //这是JavaScript DOM编程艺术(第2版)关于函数的原码 function convertToCelsius(temp) { var res ...
- Vim查找与替换命令大全,功能完爆IDE!
Vi/Vim 可以说是文本编辑中的一代传奇人物,直至现在,它仍然在高级程序员的武器库中占有一席之地.每个 Linux 发行版默认都包含Vim ,而且即使你不是 Linux 系统用户,你也可以安装 Vi ...
- C#通用类库整理--日志记录
日志的记录是将程序过程中的一些行为数据记录下来,方便开发.运维迅速的找到问题的所在,节省时间.使用时在 站点的web.config 中的<appSettings></appSetti ...
- PTA数据结构与算法题目集(中文) 7-24
PTA数据结构与算法题目集(中文) 7-24 7-24 树种统计 (25 分) 随着卫星成像技术的应用,自然资源研究机构可以识别每一棵树的种类.请编写程序帮助研究人员统计每种树的数量,计算每种树 ...
- Redis 笔记(五)—— HASH 常用命令
添加和删除键值对的散列操作 命令 用例和描述 HMGET HMGET key-name key [key ...] —— 从散列里面获取一个或多个键的值 HMSET HMSET key-name ke ...
- 【php】PDO
一.PDO的定义 1.pdo(php data object)是一个数据库的抽象层 二.PDO的特点 1.跨数据库 2.支持预处理 3.支持事务处理 三.PDO的使用 1.基本使用 (1)实例化pdo ...
- 原生js,jquery通过ajax获得后台json数据动态新增页面元素
一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...
- go For-range结构
For结构: for 初始化;条件语句;修饰语句{ 输出 } 一.For-range结构是可以怎么用? 这种构建方法可以应用于数组和切片: for ix, value := range slice1 ...
- Java第十三天,内部类
内部类 一.①成员内部类.②局部内部类(包含③匿名内部类) 1.内部类用外部类属性和方法的时候,可以随意进行访问. 2.外部类用内部类属性和方法的时候,需要通过内部类对象访问. 3.在编译成class ...