[英]How to use redux-form in peer dependency
I am trying to create a ES6 module of a login form using rollup and react-redud. 我正在尝试使用汇总和react-redud创建登录表单的ES6模块。
I have a rollup with the following configuration: 我具有以下配置的汇总:
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' },
};
My rollup bundle fine, no warnings. 我的汇总套件很好,没有警告。
I have tried every possibility of import : 我尝试了各种可能的导入方法:
import reduxForm from 'redux-form/lib/immutable/reduxForm';
import Field from 'redux-form/lib/immutable/Field';
and 和
import { Field, reduxForm } from 'redux-form/es/immutable';
and 和
import { Field, reduxForm } from 'redux-form/es/immutable';
But nothing work, everytime I install this module somewhere, the transpiled ES replace this line with these imports 但是什么也没用,每次我将模块安装在某个地方时,已转换的ES都会用这些导入内容替换此行
import reactRedux from 'react-redux';
import redux from 'redux';
I assume this is happening because redux-form depend on these two. 我认为这是因为redux-form依赖于这两个。 Because these two modules doesn't have default export , this throw an error :
由于这两个模块没有默认导出 ,因此抛出错误:
WARNING in ./node_modules/login-form/dist/login-form.es.js 3471:19-24 "export 'default' (imported as 'redux') was not found in 'redux'
警告在./node_modules/login-form/dist/login-form.es.js 3471:19-24“在'redux'中找不到导出'default'(导入为'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'
警告:./node_modules/login-form/dist/login-form.es.js 3524:26-36“在'react-redux'中找不到导出'default'(导入为'reactRedux')”
I have tried to play with globals
, namedExports
. 我尝试过玩
namedExports
globals
。 I haven't found a way to make redux-form a peer of my project. 我还没有找到一种使redux成为我项目的同伴的方法。
我终于解决了它,我不得不将外部设置为redux-form/immutable
而不是redux-form
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.