webpack5 babel箭头函数不转普通函数

最新推荐文章于 2024-02-23 14:54:57 发布
最新推荐文章于 2024-02-23 14:54:57 发布
阅读量517 收藏
点赞数 1
分类专栏： 开启星辰之旅 文章标签： webpack Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58379637/article/details/129018383
版权
在使用Webpack5时，若遇到Babel的智能预设无法将箭头函数转译为传统函数，可以在webpack.config.js的output部分添加环境配置，设置arrowFunction为false。这样重新打包后，箭头函数会转换为普通函数。
摘要由CSDN通过智能技术生成

学习webpack5发现 babel的智能预设无法将箭头函数转换为普通函数， 这时候需要在webpack.config.js 中 output 中加入配置

  environment: {
            arrowFunction: false
        }

这时候 再打包，箭头函数就会转换为普通函数

御风轻羽
关注
专栏目录
【webpack】在webpack4中使用babel
jzq950522的博客
03-15 570
babel是JS转译器，JS语法标准更新太快，而浏览器还未更新，babel就帮助我们将新标准的JS语法转译成浏览器能识别的JS标准。 我们在webpack中使用babel来转译JS npm install babel-core babel-loader babel-core是babel的核心包 修改show文件里的代码 // 操作 DOM 元素，把 content 显示到网页上 const sho...
webpack基础(四)——babel
weixin_47450807的博客
01-29 3240
一、babel介绍 在开发中我们经常使用ES6+，typescript等语法，但是在打包后，这些代码浏览器不能识别，所以此时我们使用babel来解决该问题。 babel定义：babel是一个工具链主要用于将ES6+语法兼容老版本的浏览器。 二、babel简单使用 babel是一个独立的工具，可以不在webpack中使用。 @babel/core：babel核心代码必须安装 @babel/cli:在命令行执行babel代码 npm install @babel/core @babel/cli -D //需要转
babel： 轻松将箭头函数转换为普通函数-源码
最新发布
qq_34793381的博客
02-23 1254
我们写的箭头函数，如果要通过babel转换为普通的function 函数， 可以在babel配置中添加。
webpack
tcllxxl的博客
10-20 145
webpack可以将模块化文件进行打包，（不适用模块化会有变量冲突等问题）处理成浏览器可以识别的js文件，浏览器不识别common.js es6等模块化语法 1、 首先创建文件夹，添加两个js文件，用模块化方式开发，然后添加html，一般都是在htnl中使用script标签引入js文件，但是模块化之后需要webpack打包，html中引入打包后的js文件 文件目录如下 mathUtils.js function add(num1, num2) { return num1+num2; } functi
webpack5 打包之后还有箭头函数问题
知之为知之，不知为不知
07-09 1065
webpack5 打包之后还有箭头函数问题,修改构建目标 `target`
使用webpack5打包之后，打包文件默认输出形式是箭头函数，使用babel转也不行
业余前端的职业经历
04-15 2344
也感谢一个前端同行发现的问题，之前我用webpack4.x 在ie上做了兼容性的配置 后来 webpack更新到5 之后 我那个配置就不行了 webpack5.x 打包之后 文件还是箭头函数 导致ie上还是不行 哪怕用babel 转 core-js 也不行 两个选择 1. 要不将你的版本降低到 4.x 算是一个解决方法吧 2. 把箭头函数关闭掉 environment: { arrowFunction: false } output: { ...
20.重学webpack——手写babel中的es6中的箭头函数转成es5中的普通函数的插件(了解)
2024路在何方
08-04 1764
【重学webpack系列——webpack5.0】 1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。 从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。 可以点击上方专栏订阅哦。 以下是本节正文： babel能够将es6的大部分语法转换成es5，例如箭头函数转成普通函数等。今天就利用babel的一些库，手写一版箭头函数转换成普通函数，感受下ast语法树的作用。 依赖库介绍（重点） @
【Vue】快乐学习第五篇，webpack，vueCli2，3，箭头函数
很高兴你能看到这里
06-02 959
大家好，我是小周，最近在忙着期末考试，继续写Vue的学习笔记，如果觉得还不错，三连支持博主
构建工具webpack与babel使用
weixin_44772522的博客
05-29 464
Babel入门 一、Bable是什么 Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。下面是一个例子。 // 转码前 es6 let a = 10; let foo = (a) => a+1; //转码后 es5 var a = 10; var foo = function(a...
Webpack5 核心打包流程概览
发果叁
10-08 1203
webpack在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。下面我们基于 webpack5 源码结构，对整个打包流程进行简单梳理并进行实现，便与思考和理解每个阶段所做的事情，为今后扩展和定制工程化能力打下基础。整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
webpack打包---编译转换
越努力,越幸运~~
05-12 514
webpack 编译 ES2015 webpack 默认只是对 js 模块的打包，并不会对 ES 新特性进行转化。import和export 默认能被打包，是因为这是eamodule的语法，但是其他es新特性语法并不会被转化，比如箭头函数并不会被编译成普通函数 使用 babel-loader 转化 ES 新特性 npm install babel @babel/core @bable/preset-env module.rules 中使用 babel module: { ..
webpack5常用配置--从零开始学webpack，搭建自己的脚手架
丑小鸭变黑天鹅的博客
04-01 4469
webpack入门学习一、是什么 一、是什么 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 我们来对上面的解释进行拆解： 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具 静态的static：这样表述的原因是我们
【ie語法錯誤】webpack打包ie不支持箭頭函數語法問題
weixin_42687084的博客
04-18 787
解決webpack打包后，在ie環境下運行，出現語法錯誤問題。
babel 在编译箭头函数时报 "Unexpected token" 问题
weiqi的博客
05-06 7945
babel 在编译箭头函数时报错问题今天在用webpack打包时遇到了如下错误：Module build failed: SyntaxError: D:/workspace/vs/simple-database/app/containers/App.jsx: Unexpected token (86:7) 84 | } 85 | > 86 | test = () => {
webpack配置
Heartbroken_man的博客
08-30 721
webpack搭建项目基础篇 一.创建项目 首先在终端cd到你的项目根目录，使用npm init创建package.json文件， 在你创建好的package.json文件里面的scripts字段那里新增这样一行，配置一下webpack执行的文件路径，同时创建一下webpack.config.js文件放在项目根目录下面 我们使用yarn add webpack webpack-cli安装一下webpack和webpack-cli两个依赖 （没有安装yarn的话可以使用npm或者cnpm，当然
Babel 7的使用和说明
lvxinaidou的博客
10-25 589
前端代码兼容Chrome 44,Babel 7的使用和说明 问题 目前公司多数测试同感云平台的浏览器一般是Chorme 77，现遇到特殊情况，必须要在Chorme 44上运行平台，因为浏览器版本低，会报错： 网上大致查看了一下错误原因，是es6语法出错，可能因为Chorme 44版本太低，不支持es6的语法。奇怪的一点，之前已经用过babel-loader模块转换过代码，但还存在一兼容问...
箭头函数转化为普通函数_理解 JavaScript 箭头函数
weixin_39916758的博客
11-24 782
引言ES6 出现了箭头函数，我们在现代 JavaScript 的开发中经常使用箭头函数，它令我们的代码看上去更加简洁。思考在开始正题前，我们先思考一段代码，然后在文章的最后，我们还会回到这里看看我们的代码：let team = { work: 'my-team', langs: ['JS','PHP','JAVA'], show() { this.langs.forEach(funct...
自学 TypeScript 第三天 使用webpack打包 TS 代码
jh035的博客
11-21 385
我们在写代码的时候都会考虑一个兼容性的问题，ES5啊，ES6啊，比如我们的老浏览器 IE 就不支持新 ES6 语法，这时候我们就需要把代码转成其他版本的。第四个配置，在我们编写 TS 引入其他 TS 文件的时候，webpack 不知道我们的 TS 文件可以当作一个模块去引用的，所以会报错。"ie":"11" // 指定浏览器的一个版本。"corejs":"3", // 用那个版本的 js。可以让我们的项目在这个服务器里直接运行，而这个服务器是跟随我们项目有关联的，它会跟随我们的项目进行改动，自动去刷新。
使用webpack打包ts代码的配置实现和相关说明
08-01 921
npm作为包管理器，由于服务器不在国内所以有的时候速度会慢一点，所以我们来安装淘宝团队的cnpm，这个就是npm在国内的镜像，执行以下命令来安装cnpm。在我们的项目中要使用webpack首先应该初始化，生成的默认的package.json，执行。在webpack.config.js中我们指定了打包文件的目录为dist，打包后的文件名是bundle.js，所以执行命令。在webpack.config.js中我们指定了入口文件为index.ts，我们在里边随便编写一些内容。......
webpack5 babel ES6转ES5
03-07
可以回答这个问题。webpack5 可以使用 babel 来将 ES6 代码转换为 ES5 代码，具体可以在 webpack 配置文件中配置 babel-loader，并指定需要使用的 babel 插件和预设。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值