gpt4 book ai didi

javascript - 使用 Rollup 而不是一个庞大的 index.js 文件导出单个组件?

转载 作者:行者123 更新时间:2023-12-05 04:39:57 26 4
gpt4 key购买 nike

我正在开发一个使用 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com