我应该使用什么babel插件来正确地工作react-dnd？
要正确地工作react-dnd，您可以使用以下babel插件：
- @babel/preset-react：这个插件是Babel的预设，用于转换React的JSX语法和其他相关的React特性。它可以将JSX转换为普通的JavaScript代码，以便浏览器可以理解和执行。
- @babel/plugin-proposal-class-properties：这个插件用于转换React组件中的类属性语法。它允许您在类组件中使用箭头函数和其他类属性语法，以简化代码并提高可读性。
- @babel/plugin-transform-runtime：这个插件用于转换React代码中的一些新特性，例如async/await和生成器函数。它会将这些新特性转换为旧版的JavaScript代码，以便在不支持这些特性的浏览器中运行。
- @babel/plugin-transform-react-jsx：这个插件用于将JSX语法转换为普通的JavaScript函数调用。它可以将JSX元素转换为React.createElement函数的调用，以便在浏览器中执行。
这些插件可以通过在项目的Babel配置文件（.babelrc或babel.config.js）中进行配置。您可以使用以下示例配置：
{
"presets": ["@babel/preset-react"],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-react-jsx"
]
}这样配置后，您就可以正确地使用react-dnd，并且Babel会将相关的React代码转换为浏览器可执行的代码。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（TBCAS）：https://cloud.tencent.com/product/tbcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse
相关·内容
2回答
我应该使用什么babel插件来正确地工作react-dnd？
reactjs、webpack、babeljs、react-dnd
我想在我的项目中使用react-dnd。at Object.react-dnd-html5-backend (http://localhost:1212/dist/renderer.dev.js:29536:18) 在编译后的代码中，我看到了export default createHTML5Backend;
}.call(this, exports, require, module, __filename, __dirname); }); 我知道
浏览 25提问于2019-08-29得票数 0
1回答
服务器端的反应: Babel没有在服务器上转换JSX，也没有在动态上转换，也没有手动转换。为什么？
node.js、reactjs、loopbackjs、babeljs、strongloop
我将LoopbackJS框架用于Node.js (与Express相同，因为它基于Express)。而且我不能设置React服务器端呈现。顺便提一下，其他文章建议使用require("babel/register")。有什么关系？我都试过了。结果是相同的- SyntaxError: Unexpected token。这是我的代码：var React
浏览 4提问于2015-11-21得票数 8
回答已采纳
1回答
vuejs使用babel插件-提案类-属性
vue.js、babeljs
我有一个类，其中使用了一些静态属性，如下所示： static LIMIT = 10;所以，我可以：为了做到这一点，我使用babel plugin-proposal-class-properties", { "loose": true }]}
我使用的是玩笑，我的测试也通过了这个配置。现在，我需要在Entity组
浏览 2提问于2020-01-21得票数 1
6回答
jest:测试套件运行失败，SyntaxError:意外令牌导入
reactjs、babeljs、jestjs
这是我来自package.json文件的package.json： "automock": false, "moduleNameMapper/node_modules/babel-jest", "start": { "rea
浏览 11提问于2017-01-18得票数 56
回答已采纳
2回答
如何将项目放到react-dnd中的空节？
javascript、reactjs、drag-and-drop、react-dnd、sortablejs
我正在尝试使用react-dnd创建一个拖放列表。我这里有一个问题：如果我们将image1移到第一组或第三组，我们就不能回到第二组。我怀疑问题出在这里，在DragItem.js connectDropTarget有什么想
浏览 11提问于2020-05-19得票数 3
1回答
在将模块导入新的create app项目时，Babel/JSX在构建时出错
reactjs、npm、babeljs、create-react-app、unexpected-token
我被困在这上面有一段时间了。 39 | updatePosition={this.updatePosition}
40 | {...this.p
浏览 0提问于2019-05-02得票数 1
回答已采纳
6回答
Jest - SyntaxError:无法在模块外使用导入语句
javascript、reactjs、jestjs、create-react-app
我使用的jest:24.9.0没有任何配置，从一个创建-反应-应用程序全球安装。在这些文件中，我使用es6模块。使用"test": "react-scripts test"时没有错误
但是，当我将jest与"test": "jest --config jest.config.js",一起使用时，我会看到下面的错误
浏览 6提问于2020-01-23得票数 40
回答已采纳
3回答
找不到.babel和react-hot的正确配置
javascript、reactjs、npm、babeljs、react-hot-loader
我用的是巴别塔7。{}{
"presets": ["@babel/env", "@babel/re
浏览 4提问于2018-08-08得票数 0
回答已采纳
2回答
npm运行弹出后不能使用JSX
node.js、reactjs、npm、node-modules、npm-package
我一直在关注，一周来我一直在努力解决这个问题： 4/preset-env，@babel/preset-react，@babel/cli在2019年，而不是指向babel-preset-es2015 babel-preset-stage-0 babel-preset-reac
浏览 1提问于2019-03-26得票数 1
回答已采纳
1回答
基于forEach循环的JavaScript传输、映射、滤波器和长度
javascript、webpack、micro-optimization
我有一个WebGL项目，每个微优化都很重要。对于可实现性，我使用.forEach、.map、.filter和of循环，但我想将它们转换为基于生产代码中的简单(反向)长度的循环，因为。你能告诉我如何利用Webpack来实现这个目标吗？我对这个主题的最佳实践很好奇。
浏览 3提问于2019-12-18得票数 2
回答已采纳
2回答
Loadable.Capture未报告任何模块
node.js、webpack、react-router-v4、react-dom、react-loadable
这基本上就是我所有的代码。我正在运行Hapi并尝试使用react-loadable来呈现我的React应用程序。 <App/>)
它正确地呈现了页面虽然我看不到
浏览 0提问于2018-07-07得票数 11
2回答
由于找不到@babel/运行时，从1.6.0.1更新到我的meteor应用程序1.6.1失败
javascript、meteor、babeljs
我在win 10上从1.6.0.1更新到了meteor 1.6.1，然后我把我的meteor应用更新到了1.6.1。这看起来还不错。但当我运行这个应用程序时，会提示我安装@babel/ run。(STDERR) at babel-runtime.js (packages\babel-runtime.js:25:9)当我尝试安装它时，我得到了这个错误
c:\meteor\myap
浏览 0提问于2018-01-30得票数 1
1回答
包括有关parceljs构建git信息
npm、parceljs
我有一个使用ParcelJS的TypeScript/React web应用程序，我希望在构建过程中有一个步骤，或者以一种简单的方式使用包含git信息的资源文件。不确定是否有什么东西可以在构建过程中生成git信息，我使用npm来启动parcel。
如果parcel可以加载资源文件并使其可访问，那么也可以通过具有属性来工作。我的最终目标是在webapp中显示版本和git提交点。
浏览 14提问于2020-03-05得票数 0
3回答
如何在Vite中配置Relay.JS？
javascript、relayjs、vite
我正在尝试将我的React项目从CRA迁移到Vite，这是我的vite.config.jsimport react from 'GraphQL查询文件如下所示：
所以我做了一些搜索，将vite-plugin-relay替换为vite-
浏览 23提问于2022-02-22得票数 4
1回答
Webpack忽略.babelrc
node.js、webpack、babeljs
我试着用wepback cli来构建一个非常简单的脚本.差不多：import '../mylib’；
{
"presets": ["es2015", "stage-0"],babel预置和插件，实际上babel在foo.js上确
浏览 0提问于2016-03-10得票数 2
回答已采纳
3回答
Babel-CLI正确设置配置值
javascript、ecmascript-6、babeljs、babel-cli
我正在尝试添加一个构建命令，它使用babel CLI来转换我的ES6。我很难把它正确地指向babelrc。： "build": "babel --out-dir dist src", },
但这给出了一个错误，因为我在代码中使用了数组解构符号。我想这是因为它没有拾取我的.babelr
浏览 2提问于2020-08-10得票数 1
1回答
迁移到预动作to
reactjs、webpack、babeljs、preact
我有一个通用的react应用程序，服务器端是在babel中构建的，客户端包是在webpack中构建的。我读过preact-compact文档，建议在.babelrc中添加此文档，以便使用babel构建： "plugins": [ "transform-react-jsx""alias": { &quo
浏览 2提问于2017-02-16得票数 5
回答已采纳
2回答
如何从webpack输出中删除箭头函数
javascript、webpack、internet-explorer-11、babeljs、arrow-functions
运行我的代码后，通过webpack，它的康蒂安箭头功能。我需要代码在ie11中工作，所以我需要去掉箭头函数。
我正在为所有的.js文件使用babel-加载程序。我编写了一个加载程序来检查箭头函数的代码，并在babel加载程序之后运行它，但是没有得到任何箭头函数，所以我知道babel的输出是很好的。我也尝试过babel-polyfill和babel插件</e
浏览 0提问于2019-01-04得票数 17
回答已采纳
1回答
如果使用babel-预设-env作为导入语句，还是在webpack.config.js中将它们添加到条目中，是否更好呢？
javascript、webpack、ecmascript-6、babeljs、babel-polyfill
babel-preset-env提供了选项，将其应用于babel-polyfill，并将import 'babel-polyfill'转换为特定的、基于环境的import 'core-js/whatever如果我在Webpack条目部分中添加了babel-polyfill (参见下面的示例)，或者在这种情况下，useBuiltIns被忽略并被所有可能的导入替换，那么这个转换是否适用？entry: {
app: ['babel-poly
浏览 4提问于2017-04-07得票数 10
3回答
我的节点webpack项目使用了三个babel库。它们之间的区别是什么?它们是如何被使用的？"dependencies": {}
"babel": "^5.8.23",
"babel-core
浏览 1提问于2015-09-13得票数 64
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
