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

【问题标题】：How to compile TypeScript/Less files into JavaScript/CSS by using webpack and Babel?如何使用 webpack 和 Babel 将 TypeScript/Less 文件编译成 JavaScript/CSS？
【发布时间】：2019-12-23 12:16:03
【问题描述】：

目前，我正在开发一个包并将其发布到 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

但我遇到了一些问题：

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

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

将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文件中；（我不确定这一步）
捆绑一个包含所有内容的 js 文件（使用 webpack），以及最小化版本；

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

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

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

非常感谢。

【问题讨论】：

标签： reactjs typescript webpack less bundle

【解决方案1】：

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

如你所说，tsc 可以将.tsx 文件编译成.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文件，然后使用正则匹配，这个思路一般是没有问题的，但是正则替换的全局匹配会导致一些隐藏的问题（虽然几乎不可能），所以我使用@ 987654323@进行更换。

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

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

【讨论】：