Reactjs 我应该使用什么babel插件来正确使用react dnd?
我想在我的项目中使用Reactjs 我应该使用什么babel插件来正确使用react dnd?,reactjs,webpack,babeljs,react-dnd,Reactjs,Webpack,Babeljs,React Dnd,我想在我的项目中使用react dnd。但我有一个错误: vm.js:83 Uncaught /my-project-path/node_modules/react-dnd-html5-backend/dist/esm/index.js:1 (function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module,
react dnd
。但我有一个错误:
vm.js:83 Uncaught /my-project-path/node_modules/react-dnd-html5-backend/dist/esm/index.js:1
(function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module, __filename, __dirname) { import HTML5Backend from './HTML5Backend';
^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:83:7)
at createScript (vm.js:265:10)
at Object.runInThisContext (vm.js:313:10)
at Module._compile (internal/modules/cjs/loader.js:712:26)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:798:10)
at Module.load (internal/modules/cjs/loader.js:645:32)
at Function.Module._load (internal/modules/cjs/loader.js:560:12)
at Module.require (internal/modules/cjs/loader.js:685:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object.react-dnd-html5-backend (http://localhost:1212/dist/renderer.dev.js:29536:18)
在编译代码中,我看到以下内容:
(function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module, __filename, __dirname) { import HTML5Backend from './HTML5Backend';
import * as NativeTypes from './NativeTypes';
export { getEmptyImage } from './getEmptyImage';
export { NativeTypes };
var createHTML5Backend = function createHTML5Backend(manager, context) {
return new HTML5Backend(manager, context);
};
export default createHTML5Backend;
}.call(this, exports, require, module, __filename, __dirname); });
我知道这是一个巴贝尔的一些问题,但我不知道我应该用什么插件来解决我的问题
巴别塔:
const developmentEnvironments = ['development', 'test'];
const developmentPlugins = [require('react-hot-loader/babel')];
const productionPlugins = [
require('babel-plugin-dev-expression'),
require('@babel/plugin-transform-react-constant-elements'),
require('@babel/plugin-transform-react-inline-elements'),
require('babel-plugin-transform-react-remove-prop-types'),
];
module.exports = api => {
const development = api.env(developmentEnvironments);
return {
presets: [
[
require('@babel/preset-env'),
{
targets: { electron: require('electron/package.json').version },
useBuiltIns: 'usage',
corejs: '3',
},
],
[require('@babel/preset-react'), { development }],
],
plugins: [
require('@babel/plugin-proposal-function-bind'),
require('@babel/plugin-proposal-export-default-from'),
require('@babel/plugin-proposal-logical-assignment-operators'),
[require('@babel/plugin-proposal-optional-chaining'), { loose: false }],
[
require('@babel/plugin-proposal-pipeline-operator'),
{ proposal: 'minimal' },
],
[
require('@babel/plugin-proposal-nullish-coalescing-operator'),
{ loose: false },
],
require('@babel/plugin-proposal-do-expressions'),
[require('@babel/plugin-proposal-decorators'), { legacy: true }],
require('@babel/plugin-proposal-function-sent'),
require('@babel/plugin-proposal-export-namespace-from'),
require('@babel/plugin-proposal-numeric-separator'),
require('@babel/plugin-proposal-throw-expressions'),
require('@babel/plugin-syntax-dynamic-import'),
require('@babel/plugin-syntax-import-meta'),
[require('@babel/plugin-proposal-class-properties'), { loose: true }],
require('@babel/plugin-proposal-json-strings'),
...(development ? developmentPlugins : productionPlugins),
],
};
};
您的主上下文提供程序JavaScript代码中有这一行吗?
从“react-dnd-html5-backend”导入html5后端代码>
由于jest不能很好地使用esmodules,因此需要在jest.config.js中添加这些配置
moduleNameMapper : {
'^react-dnd$': 'react-dnd/dist/cjs',
'^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
'^dnd-core$': 'dnd-core/dist/cjs',
}