我应该使用什么 babel 插件来正确工作 react-dnd？

Question

我想在我的项目中使用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); });

我知道这是 babel 的一些问题，但我不确定应该使用什么插件来解决我的问题。

通天塔：

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),
        ],
    };
};

Answer 1

您的主要上下文提供程序 JavaScript 代码中有这行代码吗？ import HTML5Backend from "react-dnd-html5-backend";

Full example

Answer 2

由于 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',
}