我正在创建一个可共享的React组件库。
该库包含许多组件，但最终用户可能只需要使用其中的一些组件。
当您将代码与Webpack（或宗地或汇总）捆绑在一起时，它将使用所有代码创建一个文件。
出于性能原因，除非实际使用该代码，否则我不希望该代码由浏览器下载。我是否认为我不应该捆绑组件是正确的吗？捆绑产品应由组件的使用者承担吗？我是否还要将其他东西留给组件的使用者？我只需要转换JSX就可以了吗？
如果同一仓库包含许多不同的组件，那么main.js中应该有什么？
您可以像lodash一样拆分其组件。
您可能拥有的是单独的组件，可以让它们分别导入或通过主组件导入。
然后，消费者可以导入整个包裹
import {MyComponent} from 'my-components';
或其各个部分
import MyComponent from 'my-components/my-component';
消费者将根据他们导入的组件创建自己的捆绑包。那应该可以防止下载整个软件包。
当您将代码与Webpack（或Parcel或Rollup）捆绑在一起时，它将使用所有代码创建一个文件。
出于性能原因，除非实际使用，否则我不希望浏览器下载所有代码
可以为每个组件生成单独的文件。 Webpack通过定义多个条目和输出而具有这种能力。假设您具有以下项目结构
- my-cool-react-components
- src // Folder contains all source code
- index.js
- componentA.js
- componentB.js
- ...
- lib // Folder is generated when build
- index.js // Contains components all together
- componentA.js
- componentB.js
- ...
Webpack文件看起来像这样
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
componentA: './src/componentA.js',
componentB: './src/componentB.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'lib'),
},
};
有关“代码拆分”的更多信息，请参见Webpack docs
如果同一仓库包含许多不同的组件，那么main.js中应该有什么？
package.json文件中有一个名为main的字段，最好根据上面的项目结构放置其值lib/index.js。并且在index.js文件中导出了所有组件。如果消费者想要使用单个组件，只需执行
const componentX = require('my-cool-react-components/lib/componentX');
我是否认为我不应该捆绑组件？捆绑产品应由组件的使用者承担吗？我是否还要将其他东西留给组件的使用者？我只需要转换JSX就可以了吗？
嗯，由您决定。我发现有些React库是以原始方式发布的，其他的则是以捆绑方式发布的。如果需要一些构建过程，请对其进行定义并导出捆绑的版本。
希望，您的所有问题都得到答复：）