我正在使用 Rollup 来捆绑许多 React 组件。组件的样式使用styled-components。我已将
styled-components
、react
和其他一些包包含在 options.external
数组中。
当我将组件导入其他应用程序时,出现错误,指出
styled-components
在页面上被实例化两次。在我看来,这是与我的 Rollup 配置或 Rollup 本身相关的问题,因为在运行构建过程时我得到了一些令人困惑的输出。
汇总配置/构建文件:
const babel = require('rollup-plugin-babel');
const commonjs = require('rollup-plugin-commonjs');
const nodeResolve = require('rollup-plugin-node-resolve');
const replace = require('rollup-plugin-replace');
const sass = require('rollup-plugin-sass');
const autoprefixer = require('autoprefixer');
const path = require('path');
const rollup = require('rollup');
const cwd = process.cwd();
const { name, moduleName } = require(path.join(cwd, 'package.json'));
const build = opts => {
rollup
.rollup({
input: opts.input || 'src/index.js',
external: [
'react',
'react-proptypes',
'styled-components',
],
output: {
globals: {
'react': 'React',
'react-proptypes': 'PropTypes',
'styled-components': 'styled',
}
},
globals: {
'react': 'React',
'react-proptypes': 'PropTypes',
'styled-components': 'styled',
},
plugins: [
babel({
exclude: 'node_modules/**',
plugins: ['external-helpers']
}),
sass({
insert: false,
output: false,
include: '**/*.scss',
exclude: [],
options: {
importer( url /*, prev */ ) {
if ( url.startsWith( '~' ) ) {
const path = process.cwd() + '/node_modules/' + url.slice( 1 );
return {
file: path
};
}
}
}
}),
nodeResolve({
jsnext: true
}),
commonjs({
include: 'node_modules/**',
namedExports: {
'./node_modules/react/react.js': [
'cloneElement',
'createElement',
'PropTypes',
'Children',
'Component'
]
}
}),
replace({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
})
.then(bundle => {
const format = opts.format || 'umd';
const formatMod = opts.formatMod || format;
const exports = opts.exports || 'named';
const dest = `dist/${name}.${formatMod}.js`;
console.log(dest);
bundle.write({
exports,
format,
name: moduleName || name,
file: dest
});
})
.catch(err => {
console.error(err);
});
};
build({
format: 'umd'
});
build({
format: 'es',
formatMod: 'esm'
});
build({
format: 'cjs'
});
简单组件:
import React from 'react';
import styled from 'styled-components';
const StyledTest = styled.div`
font-size: 24px;
color: red;
font-family: sans-serif;
`;
const Test = ({ children }) => (
<StyledTest>{children}</StyledTest>
);
export default Test;
编译简单组件:
import React from 'react';
import styled from 'styled-components';
var taggedTemplateLiteral = function (strings, raw) {
return Object.freeze(Object.defineProperties(strings, {
raw: {
value: Object.freeze(raw)
}
}));
};
var _templateObject = taggedTemplateLiteral(['\n font-size: 24px;\n color: red;\n font-family: sans-serif;\n'], ['\n font-size: 24px;\n color: red;\n font-family: sans-serif;\n']);
var StyledTest = styled.div(_templateObject);
var Test = function Test(_ref) {
var children = _ref.children;
return React.createElement(
StyledTest,
null,
children
);
};
export default Test;
我从 Rollup 中观察到的令人困惑的错误如下:
The following options have been renamed — please update your config: globals -> output.globals
The following options have been renamed — please update your config: globals -> output.globals
The following options have been renamed — please update your config: globals -> output.globals
dist/@vz-react/test.umd.js
dist/@vz-react/test.esm.js
dist/@vz-react/test.cjs.js
No name was provided for external module 'react' in options.globals – guessing 'React'
No name was provided for external module 'styled-components' in options.globals – guessing 'styled'
尽管已定义
options.globals
和 options.output.globals
,但我还是看到了这些错误。如果我删除 options.globals
,我将不再收到要求我将 options.globals
移动到 options.output.globals
的错误,但我仍然收到以下错误。
封装版本:
"rollup": "^0.59.4",
"styled-components": "^3.2.5",
重新阅读样式组件常见问题解答后,我意识到我有一个重复的
styled-components
模块。
我通过将以下内容添加到我的 webpack 配置中解决了该问题:
resolve: {
+ modules: [path.resolve(appFolder, 'node_modules'), 'node_modules'],
}
我仍然不确定为什么会从 Rollup 收到这些警告,但样式化组件的问题不再是问题。
🌤🌈👍
我已经这样声明了我的外部:
const externals = {
'react' : 'React',
'react-dom' : 'ReactDOM',
'react-scripts' : 'ReactScripts',
};
然后将变量的键添加到汇总配置的默认导出中。
external: Object.keys(externals),
这应该可以帮助你摆脱警告(: