webpack3 babel相关
2024-10-01 03:19:21
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'
]
},
}
]
}
``最新文章
- 性能计数器与profiler的组合性能诊断
- json和jsonp（json是目的，jsonp是手段）
- HP_UX系统批量创建LV或raw设备的Shell 脚本
- Android Native jni 编程入门
- 关于vue.js 组件的调用
- [Effective JavaScript 笔记]第33条：使构造函数与new操作符无关
- HTML前端
- 《Python基础教程（第二版）》学习笔记 -> 第七章 更加抽象
- [Raobin] Ext.net在页面中以窗体的形式打开另外的页面
- [C入门 - 游戏编程系列] 贪吃蛇篇(四) - 食物实现
- PHP学习笔记--1，不总结，不掌握，不明白！
- Linux 安装依赖库
- Python的time和datetime模块
- Gate One——用web展示Terminal（安装）
- 再次实践 MySQL chart - 每天5分钟玩转 Docker 容器技术（166）
- [Java]LeetCode690. 员工的重要性 | Employee Importance
- Android + https 实现 文件上传
- Android 开发 Activity里获取View的宽度和高度 转载
- Tomcat9报错 The valid characters are defined in RFC 7230 and RFC 3986
- [Tensorflow] Object Detection API - predict through your exclusive model