npm - 是否有默认情况下不捆绑的捆绑器/工具，只进行指定的转换，如编译 SCSS 模块？

Question

我想创建一个 UI 库并将其发布到 NPM。但是，我不喜欢将代码捆绑到单个文件中并在我的代码周围添加捆绑器代码的想法，这是所有捆绑器默认执行的操作（好吧，我猜捆绑器必须捆绑）。

我正在使用 TypeScript，并使用tsc. 我想保留它，让bundler或其他工具只运行结果并改变一些东西。

例如，让我们拿这个文件：

import React from "react";

import styles from "./b.module.scss";

const B = () => {
    return (
        <div className={styles.index}>index</div>
    );
};

export { B };

它被编译成这个 ESM 代码：

import React from "react";
import styles from "./b.module.scss";
const B = () => {
    return (React.createElement("div", { className: styles.index }, "index"));
};
export { B };
//# sourceMappingURL=b.js.map

没有太大的变化，但这就是我在这一步想要的。

现在我希望该工具：

• 查看 module.scss 导入
• 构建b.css文件，用类名替换类mangled名
• 替换import styles from "./b.module.scss";为import "./b.css";
• 替换{ className: styles.index }为：（{ className: "b_index_f9cb22" }反映 b.css 中的新类名）

基本上就是这样

我想这些是 webpack 插件通常采取的步骤，但 webpack 做的不止这些，就像我说的 - 添加自己的代码，将东西捆绑在一起，最小化代码等。其中一些我似乎可以跳过，但输出仍然与我原来的输出相去甚远。

有没有一种工具可以让我做我想做的事？

标签： npmwebpacksassbuildbundle