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

最新推荐文章于 2024-03-22 13:26:39 发布
最新推荐文章于 2024-03-22 13:26:39 发布
阅读量511 收藏
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youngeffort/article/details/84615825
版权

报错：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，如若不能使用，请查看相关官方文档

youngeffort
关注
专栏目录
react项目配置babel编译jsx
qq_37314372的博客
07-13 2060
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
webpack手动配置React开发环境的步骤
08-27
Webpack 手动配置React开发环境是一项基础且重要的工作，它能帮助开发者自定义构建流程，适应复杂的项目需求。本文将详细介绍如何一步步配置一个具备自动构建、自动刷新和Sass语法支持的React开发环境。 首先，我们...
搭建react环境之babel配置
苏一恒
04-24 4192
本地安装 $ 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个阶段），选...
React中Babel的配置
最新发布
kitty007th的博客
03-22 958
Babel的配置因为继承了Facebook的官方配置，自己项目中需要做的配置就简单得多了，但是仍需注意React的官方大致都完成了什么配置，可参考github上的。2. Babel配置文件中直接继承React的官方配置。
webpack配置 babel
weixin_34194359的博客
04-11 199
本系列主要学习webpack的配置。webpack自己间接的用过不少次，但是自己配置却没多少次，所以特地写写文章，学习webpack的配置，有不恰当的地方，欢迎指正。这次配置 babel 。 若你对webpack的概念还不了解，先查看相应文档webpack中文文档 一、初始化一个webpack项目 npm init -y ...
webpack及babel配置
qq_39111074的博客
11-17 2411
请先确认自己的电脑已经安装了 node 和 npm，没有安装的请先安装，以下操作需在安装了这两个的基础上操作 webpack配置 1. 创建一个空文件夹 2. 创建 package.json 文件- - -npm init。 使用编辑器打开该文件夹，此处我使用的编辑器为 vscode，再命令行输入命令‘npm init’，会出现一些选项，可以都直接回车，默认设置，全部回车完成后，会生成一个 “package.json” 文件。如下： 如果要更改信息可以直接在改文件中修改 如果希望 “package.jso
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 -...
webpack入门+react环境配置
12-10
在搭建React开发环境时，我们需要额外安装一些依赖，如React库本身，以及Babel用于转换ES6和React JSX语法： ```bash npm install --save-dev react react-dom npm install --save-dev babel-core babel-loader ...
React 项目迁移 Webpack Babel7的实现
10-18
React项目迁移Webpack和Babel7的实施涉及到多个技术环节的更新和配置更改，是为了利用最新版本的工具来提高开发效率、优化构建流程以及增加对现代JavaScript特性的支持。下面详细阐述了在React项目中实施Webpack和...
webpack4的配置 babel react的配置 watch : true
qlin_11的博客
06-03 509
目前webpack为4，他对一些包进行了废弃，而且对一些包要求有版本的配合，这里在安装老版本的包时会有提醒，以下是我的babel和react的配置，包括版本和变量。注意babel （包括es6转es5 和react babel的）的版本号，还有presets的变量名（不再使用es2015而是evn，也不是react，而是@babel/preset-react） weabpack 设置了 wat...
配置babel_【webpack实践】配置babel，使用react
weixin_42395245的博客
12-22 358
正常情况下，大多数浏览器只能支持ES5的语法，react语法是不能识别的，需要进行babel的配置，将react的语法的代码转换为ES5的语法供浏览器解析执行1 在package.json中安装需要的依赖... "dependencies": { "@babel/runtime": "^7.12.1", "react": "^17.0.0", "react-dom":...
检查react的版本_React和Babel的优雅升级 ; )
weixin_34061200的博客
01-13 719
本次升级基础包情况：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 248
最近开发的环境都是基于react+webpack的，但是是在搭建好环境中进行开发；很多东西都是知其然不知其所以然，所以决定自己动手从零开始安装react+webpack开发环境。这篇文章就记录了整个搭建的步骤，虽然目前还是很基础的一个项目环境，但是经过这一次实践下来，我加深了对webpack配置的了解，也解开了以前遇到的一些疑惑。还是小白一枚，文中如有不对或不妥当的地方，希望各路大神不吝赐...
babel的基本配置和使用快速回顾
祥哥的说
02-18 2246
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 1653
包含 Eslint 配置，webPack配置，React-Router路由配置
React的基本学习（一）——概念了解、babel配置、简单使用
#的博客
04-27 878
前言： 今天开始了解一个前端语言框架React 代码之前： 什么是React： React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 Reac...
「前端基建」带你在Babel的世界中畅游
程序员成长指北
11-14 267
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群Babel在目前前端领域类似一座山一样的存在，任何项目或多或少都有它的身影在浮现。也许...
Babel配置
徐___L
12-17 4122
Babel是什么 官网：Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。一般都是和webpack配合使用 使用 安装 npm install @babel/core @babel/cli @babel/preset-env -D @babel/core Babel 的核心功能包含在 @babel/core 模块中，所有的转译都将使用本地配置文件。 配置文件 Babel
手把手教你Webpack手动配置React开发环境
React的create-react-app虽然提供了便捷的快速启动模板，但在处理大型或复杂项目时，定制化的Webpack配置显得更为灵活。 首先，你需要通过npm初始化一个新的项目目录： ```bash mkdir react-webpack-demo cd react-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值