如何让 Babel 处理 LESS 文件？

Posted 2023-03-07

【中文标题】如何让 Babel 处理 LESS 文件？

【英文标题】：How to make Babel handle LESS files?

【发布时间】：2017-10-04 22:38:35

【问题描述】：

我有一个带有 NodeJS 的服务器端渲染设置的同构 React 应用程序。我正在使用 Babel 和 Webpack，除了一个问题之外，它们工作得很好：

Babel 无法处理require('somefile.less')。

出于这个原因，我使用 Webpack 来编译后端和前端代码，因为 Webpack 有很好的 CSS 和 LESS 加载器，而且它不会在看到 CSS 或 LESS 文件时吓坏了。但是，这种方法也有其自身的问题：

服务器启动时间增加了很多，因为 webpack 必须编译整个 后端优先。

当我为生产部署代码时这很好，但在开发环境中，它确实会损害生产力。

另一方面，babel-node 实用程序相比之下超级快，只要我能让它处理 CSS/LESS 文件。因此我的问题是：我们可以让 Babel 使用 CSS/LESS 文件吗？

【问题讨论】：

我相信你需要 Webpack 才能使用require。你需要一个像 Webpack、Browserify 或 Node 提供的模块环境来加载模块。 Babel 只是一个转译器，它不会自己处理那部分。

@PedroCastilho 你说得对，我们甚至需要 webpack 才能在前端使用 require。但在这里，我的问题是关于后端转译。

你的意思是像服务器端渲染这样的东西吗？

是的，问题在于后端“需要”LESS 文件（服务器端渲染）。

您可以使用 Gulp 或其他构建系统将 Less 编译为 CSS，并使用 Juice 将编译后的 CSS 内联到您的 html 中。整个管道可以使用 Gulp 自动化。

【参考方案1】：

Babel is a javascript compiler

Babel 是一个工具链，主要用于在旧浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。

所以答案是否。 Babel 仅适用于 JS 文件。