如何在对等依赖中使用 redux-form

Question

我正在尝试使用 rollup 和 react-redud 创建登录表单的 ES6 模块。

我有一个具有以下配置的汇总：

const plugins = [
  // Unlike Webpack and Browserify, Rollup doesn't automatically shim Node
  // builtins like `process`. This ad-hoc plugin creates a 'virtual module'
  // which includes a shim containing just the parts the bundle needs.
  {
    resolveId(importee) {
      if (importee === processShim) return importee;
      return null;
    },
    load(id) {
      if (id === processShim) return 'export default { argv: [], env: {} }';
      return null;
    },
  },
  nodeResolve(),
  commonjs({
    include: 'node_modules/**',
    namedExports: {
      './node_modules/immutable/dist/immutable.js': ['fromJS', 'Map', 'List', 'Record', 'Iterable'],
      './node_modules/redux/dist/redux.js': ['createStore', 'combineReducers', 'bindActionCreators', 'applyMiddleware', 'compose'],
      './node_modules/react-redux/dist/react-redux.js': [' Provider', 'createProvider', 'connectAdvanced', 'connect'],
    },
  }),
  replace({
    'process.env.NODE_ENV': JSON.stringify(prod ? 'production' : 'development'),
  }),
  inject({
    process: processShim,
  }),
  json(),
  babel({
    plugins: ['external-helpers'],
    exclude: 'node_modules/**',
  }),
  cleanup(),
];

if (prod) plugins.push(uglify(), visualizer({ filename: './bundle-stats.html' }));

export default {
  input: 'src/index.js',
  sourcemap: true,
  name: pkg.name,
  external: ['react', 'react-dom', 'prop-types', 'styled-components', 'bootstrap-styled', 'classnames', 'react-transition-group', 'loaders', 'redux-form', 'redux', 'react-redux', 'react-intl', 'message-common', 'bootstrap-styled-motion'],
  exports: 'named',
  output,
  plugins,
  globals: { react: 'React', 'react-dom': 'ReactDom', 'prop-types': 'PropTypes', 'styled-components': 'styled', classnames: 'cn', 'react-transition-group': 'ReactTransitionGroup', loaders: 'loaders', 'redux-form': 'redux-form', 'react-intl': 'react-intl', 'message-common': 'message-common' },
};

我的汇总包很好，没有警告。

我已经尝试了所有导入的可能性：

import reduxForm from 'redux-form/lib/immutable/reduxForm';
import Field from 'redux-form/lib/immutable/Field';

和

import { Field, reduxForm } from 'redux-form/es/immutable';

和

import { Field, reduxForm } from 'redux-form/es/immutable';

但是没有任何效果，每次我在某个地方安装这个模块时，转译后的 ES 都会用这些导入替换这一行

import reactRedux from 'react-redux';
import redux from 'redux';

我假设这是因为 redux-form 依赖于这两个。因为这两个模块没有 default export，所以会报错：

WARNING in ./node_modules/login-form/dist/login-form.es.js 3471:19-24 "export 'default' (imported as 'redux') was not found in 'redux'

WARNING in ./node_modules/login-form/dist/login-form.es.js 3524:26-36 "export 'default' (imported as 'reactRedux') was not found in 'react-redux'

我试过globals、namedExports。我还没有找到让 redux-form 与我的项目对等的方法。

Answer 1

我终于解决了它，我不得不用 redux-form/immutable 而不是 redux-form

来设置我的外部设备

如何在对等依赖中使用 redux-form

How to use redux-form in peer dependency

rollup

reactjs

redux

redux-form

react-redux