如何使用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' 修改为 import styles from './index.css'；或者直接将样式表注入到 js 文件中；（我不确定这一步）
2. 使用 webpack 将所有东西打包到一个 JS 文件中，并提供最小化版本；

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

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

因此，您有什么建议可以帮助我解决这个问题吗？我看了许多教程，但大多数是 React/Less/TypeScript 项目（不是软件包开发），或者是 TypeScript 软件包（不使用 less/css）。

非常感谢您的帮助。

- hijiangtao

Answer 1

这个问题已经存在很长时间了，我希望我的答案仍然可以帮助那些点击进来寻找答案的人：

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

基于您上面的目录结构，您可以在`package.json`的`scripts`下编写以下命令：

如果您使用`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文件中引入的样式文件仍然带有.less或.scss后缀，我们需要替换这部分.js文件，您可以考虑使用node读取每个.js文件，然后使用正则表达式匹配，这个想法通常没有问题，但全局匹配的正则替换可能会引起一些隐藏的问题（尽管几乎不可能），所以我使用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。

- vortesnail