webpack在配置react项目时的babel配置

最新推荐文章于 2025-06-23 15:27:48 发布
最新推荐文章于 2025-06-23 15:27:48 发布
阅读量544 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/youngeffort/article/details/84615825
本文详细介绍了如何解决在使用Babel预设时遇到的错误：不允许导出对象，只允许导出函数。通过修改package.json和.babelrc文件，可以有效避免此问题，确保项目正常运行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

报错：Error: Plugin/Preset files are not allowed to export objects, only functions. In E:\myRepository\my-webpack-react\node_modules\babel-preset-react\lib\index.js
    at ...

解决：

1、package.json文件修改

2、.babelrc文件修改

注意：更新时间为2018-11-29，如若不能使用，请查看相关官方文档

webpack5搭建react框架-基础环境配置
前端三脚猫的博客
03-15 1940
通过使用webpack5搭建基础react框架来学习webpack相关知识。
React 开发（二十五）：使用 Webpack 打包 React 应用 - 配置与优化
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
11-10 1490
Webpack 是一个模块打包器，它能够将应用的不同资源（JavaScript、CSS、HTML、图片等）视为模块，并将这些模块打包成一个或多个 bundle 文件。Webpack 不仅能处理 JavaScript，还支持 CSS、图片、字体等静态资源的处理，是前端构建工具链中的核心部分。
React中Babel的配置
kitty007th的博客
03-22 1160
Babel的配置因为继承了Facebook的官方配置，自己项目中需要做的配置就简单得多了，但是仍需注意React的官方大致都完成了什么配置，可参考github上的。2. Babel配置文件中直接继承React的官方配置。
搭建react环境之babel配置
苏一恒
04-24 4240
本地安装 $ npm install --save-dev babel-cli 编译插件 ES2015转码规则 npm install --save-dev babel-preset-es2015 React ES2015转码规则 $ npm install --save-dev babel-preset-react ES7不同阶段语法提案的转码规则（共有4个阶段），选...
ReactWebpackBabel基础配置指南：从零开始搭建React项目
最新发布
weixin_42609225的博客
06-23 688
在前端开发中，模块打包器（Module Bundler）是一个极其重要的概念。简单来说，模块打包器是一种工具，它能够将分散的JavaScript模块打包成一个或多个静态文件，以便在浏览器中使用。打包器的核心目标是解决前端开发中依赖关系管理的问题，将多个模块合并为一个文件，减少了HTTP请求的数量，加快了页面加载速度。Webpack是目前最为流行的模块打包器之一。它的核心概念包括入口（entry）、出口（output）、Loaders以及Plugins。
webpack配置 babel
weixin_34194359的博客
04-11 220
本系列主要学习webpack的配置。webpack自己间接的用过不少次，但是自己配置却没多少次，所以特地写写文章，学习webpack的配置，有不恰当的地方，欢迎指正。这次配置 babel 。 若你对webpack的概念还不了解，先查看相应文档webpack中文文档 一、初始化一个webpack项目 npm init -y ...
webpack及babel配置
qq_39111074的博客
11-17 2529
请先确认自己的电脑已经安装了 node 和 npm，没有安装的请先安装，以下操作需在安装了这两个的基础上操作 webpack配置 1. 创建一个空文件夹 2. 创建 package.json 文件- - -npm init。 使用编辑器打开该文件夹，此处我使用的编辑器为 vscode，再命令行输入命令‘npm init’，会出现一些选项，可以都直接回车，默认设置，全部回车完成后，会生成一个 “package.json” 文件。如下： 如果要更改信息可以直接在改文件中修改 如果希望 “package.jso
webpack4的配置 babel react的配置 watch : true
qlin_11的博客
06-03 540
目前webpack为4，他对一些包进行了废弃，而且对一些包要求有版本的配合，这里在安装老版本的包时会有提醒，以下是我的babel和react的配置，包括版本和变量。注意babel （包括es6转es5 和react babel的）的版本号，还有presets的变量名（不再使用es2015而是evn，也不是react，而是@babel/preset-react） weabpack 设置了 wat...
webpack手动配置React开发环境的步骤
08-27
Webpack 手动配置React开发环境是一项基础且重要的工作，它能帮助开发者自定义构建流程，适应复杂的项目需求。本文将详细介绍如何一步步配置一个具备自动构建、自动刷新和Sass语法支持的React开发环境。 首先，我们...
react-webpack-setup：React Redux Webpack Babel Koa设置可以立即启动项目
01-29
React Redux Webpack Babel Koa设置可立即启动项目 此仓库适用于那些不想弄乱react webpack babel设置的人。 这个程序为你做。 您开始从“ App.js”开始编写应用程序逻辑 使用的图书馆 v15.2 v3.6 v2.8 v4.20.2...
webpack3+React 的配置全解
12-12
在结合 React 开发时，Webpack 提供了丰富的配置选项来优化项目构建过程。以下是基于 Webpack 3 和 React 的配置全解： 1. **安装**： 首先，需要初始化一个新的 npm 项目并安装必要的依赖： ```bash npm init -...
从零开始配置React项目：Webpack 4与Babel 7实战指南
weixin_35636570的博客
11-15 981
本文还有配套的精品资源，点击获取 简介：本教程详细介绍了如何不依赖 create-react-app ，而是使用最新的Webpack 4和Babel 7来从头构建React项目。Webpack负责打包资源，而Babel则用于转换JavaScript代码，使之兼容旧浏览器。文章将引导读者理解如何安装必要依赖、创建Webpack配置文件和 .babelrc...
配置babel_【webpack实践】配置babel，使用react
weixin_42395245的博客
12-22 404
正常情况下，大多数浏览器只能支持ES5的语法，react语法是不能识别的，需要进行babel的配置，将react的语法的代码转换为ES5的语法供浏览器解析执行1 在package.json中安装需要的依赖... "dependencies": { "@babel/runtime": "^7.12.1", "react": "^17.0.0", "react-dom":...
react项目配置babel编译jsx
qq_37314372的博客
07-13 2160
react项目配置babel编译jsx 摘要 从零搭建react项目，webPack4+babel-loader8 配置须知 babel-loader7.x 要与 babel6.x 结合使用 babel-loader8.x 要与 babel7.x 结合使用 这里以babel-loader8.x为例，使用npm 进行如下安装： npm i @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform
检查react的版本_React和Babel的优雅升级 ; )
weixin_34061200的博客
01-13 775
本次升级基础包情况：react 15.6 -> 16.6，babel 6.6 -> 7.1。升级流程：升级React功能测试升级Babel功能测试OK，下面我要开始升级工作了。先新拉一个分支，不然改出毛病了就gg了：Good，没问题。React 15 到 React 16用npm-check检测一下，用-u参数进行交互式UI展示。npm-check是一款可以在命令行通过图形化界面进行检...
webpack入门--从零开始安装webpack到搭配react使用
ganyuyu37的博客
06-05 273
最近开发的环境都是基于react+webpack的，但是是在搭建好环境中进行开发；很多东西都是知其然不知其所以然，所以决定自己动手从零开始安装react+webpack开发环境。这篇文章就记录了整个搭建的步骤，虽然目前还是很基础的一个项目环境，但是经过这一次实践下来，我加深了对webpack配置的了解，也解开了以前遇到的一些疑惑。还是小白一枚，文中如有不对或不妥当的地方，希望各路大神不吝赐...
babel的基本配置和使用快速回顾
祥哥的说
02-18 2358
babel知识点回顾babel的基本配置和使用快速回顾一、环境搭建及基本配置二、babel-polyfill的核心及按需引入什么是polyfillcore-js和regeneratorbabel-polyfill即两者的集合babel-polyfill如何按需引入三、babel-runtime 避免污染全局变量babel-polyfill的问题babel-runtime如何配置 babel的基本配置和使用快速回顾 环境搭建及基本配置 babel-polyfill的核心及按需引入 babel-runtime
【React | 完整项目创建流程】能看到这么详细的React配置流程，就偷着乐吧!
云散的博客
08-24 1855
包含 Eslint 配置，webPack配置，React-Router路由配置
React的基本学习（一）——概念了解、babel配置、简单使用
#的博客
04-27 1054
前言： 今天开始了解一个前端语言框架React 代码之前： 什么是React： React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 Reac...
Webpack4配置React项目实战教程
在结合Webpack和React时，开发者通常会用到Webpack的loader机制，通过安装不同的loader来转换不同类型的文件。例如，babel-loader用于转换ES6以上的JavaScript代码为浏览器可以理解的ES5代码，而style-loader和css-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值