作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在开发一个使用 React 构建的专有组件库,并使用 Rollup 来捆绑所有内容。目前,它将所有内容捆绑到这些文件中:
dist
├ cjs
│ └ index.js (1.7mb)
└ esm
└ index.js (1.7mb)
我希望我可以将每个组件单独捆绑在一起,这样消费应用程序就不必下载巨大的 index.js
文件,但这可能是我对 Rollup 缺乏经验的地方中。
我目前有一个 Rollup 入口点:
input: [
'src/index.js',
],
我的 index.js
文件看起来像这样(但包含更多组件):
import { Badge } from './components/Badge';
import { Button } from './components/Button';
import { CardFooter } from './components/CardFooter';
import { CardHeader } from './components/CardHeader';
import { CardTagList } from './components/CardTagList';
import { CardToolbar } from './components/CardToolbar';
import { CartAnimation } from './components/CartAnimation';
export {
Badge,
BasePrice,
Button,
CardFooter,
CardHeader,
CardTagList,
CardToolbar,
CartAnimation,
};
我必须做些什么来确保每个组件都是单独捆绑的,并且仍然可以导入到使用库的应用程序中:
import { Button } from '@company/component-library';
这是我今天的完整配置:
import { babel } from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import commonjs from '@rollup/plugin-commonjs';
import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';
import eslint from '@rollup/plugin-eslint';
import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import stylelint from 'rollup-plugin-stylelint';
import styles from 'rollup-plugin-styles';
require('dotenv').config();
export default {
external: [
'react',
'react-dom',
'styled-components',
],
input: [
'src/index.js',
],
output: [
{
// Bundle into ESM for modern consumers.
// Only ESM build can currently be tree-shaken.
dir: 'dist/esm',
format: 'esm',
},
{
// Bundle into CJS for other consumers.
dir: 'dist/cjs',
format: 'cjs',
},
],
plugins: [
eslint({
include: '**/*.js',
throwOnError: true,
}),
stylelint(),
babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**',
}),
resolve({
browser: true,
}),
styles(),
commonjs(),
json(),
dynamicImportVars({}),
terser(),
],
};
注意:可能不重要,但这个项目作为私有(private)仓库发布到 npm,但目前使用它的应用程序使用提交哈希安装它。
最佳答案
您可以尝试添加 preserveModule
export default {
preserveModules: true,
...
}
关于javascript - 使用 Rollup 而不是一个庞大的 index.js 文件导出单个组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70369224/
我是一名优秀的程序员,十分优秀!