如何使用 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. 捆绑一个包含所有内容的 js 文件（使用 webpack），以及最小化版本；

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

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

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

真的非常感谢。

Answer 1

这个问题好久没来了，希望我的回答还能帮到点进去找答案的人：

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

根据您上面的目录结构，您可以在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