我需要创建一个React组件库，我想使用CRA，因为我想引用同样使用CRA编写的主应用程序的代码。
我尝试了babel，但它只转换JS代码，而保留所有其他文件(CSS、SVG(，并且我的库的用户不在CRA上，因此不支持SVG。
// babel.config.js
module.exports = function (api) {
api.cache(true);
const presets = ["@babel/preset-env", "@babel/preset-react"];
const plugins = ["macros"];
return {
presets,
plugins,
};
};
// package.json
{
"scripts": {
"clean": "rimraf dist/babel",
"build": "npm run clean && cross-env NODE_ENV=production babel src/lib --out-dir dist/babel --copy-files --ignore __tests__,spec.js,test.js",
}
}
我也尝试过package，但这迫使我更改包含SVG的语法。
//.parcelrc
{
"extends": "@parcel/config-default",
"transformers": {
"*.svg": [
"...",
"@parcel/transformer-svg-react"
]
}
}
所以我也尝试了CRACO，并使用了以下配置，但这是分别输出JS和CSS，我无法在导入组件时合并或自动包含它们。我也尝试从加载程序中删除mini-css-extract-plugin，但没有工作。
//craco.config.js
const path = require("path");
const EsmWebpackPlugin = require("@purtuga/esm-webpack-plugin");
module.exports = {
webpack: {
configure: (config, { paths }) => {
//* Remove mini-css-extract-plugin from loaders
// config?.module?.rules[1].oneOf.forEach((sett) => {
// if (sett.use) {
// sett.use = sett.use.filter((u) => {
// if (u.loader && typeof u.loader === "string" && u.loader.includes("mini-css-extract-plugin")) {
// return false;
// }
// return true;
// });
// }
// });
const isEsm = process.argv.includes("--esm") ? true : false;
paths.appBuild = config.output.path = path.resolve(isEsm ? "./dist/esm" : "./dist/cjs");
// Set separate entry point when building the widget lib
// https://webpack.js.org/concepts/entry-points
config.entry = `${paths.appSrc}/lib/index.js`;
// Output a "window" module and define its name via the library key.
// This key will be what is referenced when the hub looks for
// the correct module to dynamically load after the bundle is
// injected into the DOM
// https://webpack.js.org/configuration/output
config.output.library = "swimBookForm";
config.output.libraryExport = isEsm ? undefined : "default";
config.output.libraryTarget = isEsm ? "var" : "umd";
config.output.filename = "main.js";
// Because this is being injected in the hub's index.html,
// we don't need the HTML plugin
config.plugins = config.plugins.filter(
(plugin) => plugin.constructor.name !== "HtmlWebpackPlugin"
// && plugin.constructor.name !== "MiniCssExtractPlugin"
);
// If we're including custom CSS, make sure it's bundle easily identified
const cssPluginIdx = config.plugins.map((p) => p.constructor.name).indexOf("MiniCssExtractPlugin");
if (cssPluginIdx !== -1) {
config.plugins[cssPluginIdx].options.filename = "../main.css";
}
// Exclude shared dependencies to reduce bundle size
// https://webpack.js.org/configuration/externals
config.externals = isEsm ? [] : ["react"];
// Consolidate bundle instead of creating chunks
delete config.optimization;
return config;
},
plugins: {
add: process.argv.includes("--esm") ? [new EsmWebpackPlugin()] : [],
// remove: ["MiniCssExtractPlugin"],
},
},
};
package.json
{
...
"scripts": {
"start": "react-scripts start",
"build": "craco build && craco build --esm",
"test": "craco test --env=jsdom",
"build:web": "react-scripts build"
},
...
}
我应该使用CRACO对CRA进行哪些更改，使其与输出React组件库兼容我坚持使用CRA，并想要一个扩展的解决方案，因为我想使用它提供的功能，例如一个简单的工具链来维护，开箱即用的功能，如CSS模块、SVG组件等。此外，拥有一个基于CRA的解决方案意味着它(很可能(也将与即将推出的酷CRA功能兼容。
例如，我们可以以这个回购为例，我想让这个回购有资格按照给定的例子使用。
您的问题并不十分清楚。我想你想创建一个npm包，并将你的react组件库嵌入其中
请参阅如何创建npm包。
否则，如果您知道如何创建react组件，只需使用react组件创建库文件夹即可。并在需要使用组件时导入这些组件。
你似乎有svg使用的pb或svg文件的捆绑使用？这取决于你想做什么，如果这些svg文件只需要css功能？或者，如果您想操作dom svg内容？
如果你想保持文件的原样，不被捆绑，那么就把它们放在公用文件夹中。
你的package.json应该像一样修改
{
...
"scripts": {
"start": "craco start",
"build": "craco build && craco build --esm",
"test": "craco test --env=jsdom",
"build:web": "craco build"
},
...
}