如何使用 webpack 和 Babel 将 TypeScript/Less 文件编译成 JavaScript/CSS？

Question

目前，我正在开发一个包并准备在 npm 中发布它，我用 TypeScript 编写了它，但在包捆绑方面遇到了一些问题。

我把我的代码（TypeScript/Less 文件）放进去src，结构如下所示：

src
??? components
?   ??? table.less
?   ??? table.tsx
??? index.tsx
??? utils
    ??? mock.tsx

由于我想在npm中发布它，所以我需要将它编译成JavaScript/CSS文件（在lib文件夹中），以便其他开发人员可以直接导入它（无需在他们的项目中额外编译），结构应该是这样的：

lib
??? components
?   ??? table.css
?   ??? table.js
??? index.js
??? utils
    ??? mock.js

但是我遇到了一些问题：

1. 如果我使用tsc命令，tsx文件可以正确编译为js文件，但less文件将被忽略；
2. 如果我使用 webpack 命令而不是tsc，结果将被捆绑在一个文件中，并且失去它的原始结构，并且它会混淆包用户；

我想我需要通过以下方式使其工作：

1. 从编译所有文件src，以lib一个接一个（保持相同的文件夹结构）;
   • tsx文件到js文件；
   • less文件到css文件；
   • 添加声明文件，例如index.js.d.ts和index.css.d.ts；
   • 修改一些写作风格，如import styles from './index.less'to import styles from './index.css'; 或者直接在js文件中注入样式表；（我不确定这一步）
2. 捆绑一个包含所有内容的 js 文件（使用 webpack），以及最小化版本；

该包包含 JSX 语法，因为我在其中使用了 React。

据我所知，我需要在编译 TS/JS 代码时使用 Babel，在编译 less 和其他资产时需要使用 webpack，但我对如何将它们组合在一起工作感到困惑。

那么关于如何结合使用很酷的工具来解决我的问题有什么建议吗？我浏览了很多教程，但其中大部分是 React/Less/TypeScript 项目（不是包开发）或 TypeScript 包（不使用 less/css）。

真的非常感谢。

Answer 1

这个问题已经存在很久了，希望我的回答仍然可以帮助到点击寻找答案的人：

正如你所说，.tsx文件可以编译tsc成.ts文件，但.scss也可以.less不编译。所以你需要使用node-sass或less来处理它们。

根据上面的目录结构，您可以在scriptsin下编写以下命令package.json：

如果你使用less：

"scripts": {
  "build:css": "lessc src/components/table.less lib/components/table.css"
}

或者node-sass：

"scripts": {
  "build:css": "node-sass -r src -o lib"
}

是的，node-sass扫描根文件夹，自动将.scss里面的文件编译成.css对应目录下的文件。使用less可能需要您花更多的时间探索有用的方法。

但是仅仅转换成css文件并没有什么帮助，因为js文件中引入的样式文件仍然带有.lessor.scss后缀，我们需要替换这部分文件.js，你可能会想到使用usenode来读取每个.js文件，然后使用正则match，这个思路一般是没有问题的，但是正则替换的全局匹配会导致一些隐藏的问题（虽然几乎不可能），所以我使用AST来做替换。

是的，我为此编写了一个易于使用的命令行工具，您只需要：

npm i tsccss -D

并添加 npm 脚本：

"scripts": {
  "build:css": "node-sass -r src -o lib",
  "compile": "tsc -p tsconfig.json && tsccss -o lib",
  "build": "npm run build:css && npm run compile"
}

是的，正如您所看到的，tsccss -o lib完全足够了。

希望你喜欢它，这里是 github/repo：tsccss