设置CSS和JS预处理器

优质

小牛编辑

129浏览

2023-12-01

正确使用CSS预处理器(如Sass)，以及JS预处理器和转换器可以大大提升你的开发效率。本文讲解如何设置设置CSS和JS预处理器。

TL;DR

预处理器允许您使用浏览器原生不支持的CSS和JavaScript中的特性，例如，CSS变量。
如果你使用预处理器，使用Source Maps(源映射)将原始源文件映射到渲染输出文件。
确保您的网络服务器支持Source Maps(源映射)。使用支持的预处理器自动生成Source Maps(源映射)。

什么是预处理器？

预处理器接受任意源文件，并将其转换为浏览器可以理解的东西。

输出CSS，它们添加很多浏览器原生不支持（或尚未支持）的功能，比如CSS变量，嵌套和多层嵌套。这个类别中值得注意的例子有Sass，Less和Stylus。

输出JavaScript，他们是从JavaScript或者从另一种完全不同的语言转换（编译）过来的，或将超集或新语言标准转换到当前的标准。此类别中的值得注意的例子有CoffeeScript和ES6（通过Babel转换）。

调试和编辑预处理的内容

只要你在浏览器中并使用DevTools编辑你的CSS或调试你的JavaScript，一个问题变得很明显：你看到的不是真正的源代码，并不真正帮助你解决问题。

为了解决这个问题，大多数现代预处理器都支持称为Source Maps(源映射)的功能。

什么是`Source Maps`(源映射)

source map(源映射)是基于JSON的映射格式，它在编译压缩的文件和其源文件之间创建关联。当你为生产环境构建时，它会为你压缩并且合并JavaScript文件，并且为你生成一个包含源文件信息的源映射。

源映射如何工作

对于每个生成的CSS文件，除了编译的CSS之外，CSS预处理器还生成源映射文件（.map）。源映射文件是一个JSON文件，用于定义每个生成的CSS声明之间的映射和源文件的相应行。每个CSS文件包含一个注释，指定其源映射文件的URL，嵌在文件的最后一行的特殊注释中：

/*# sourceMappingURL=<url> */

举个例子，给定一个名为styles.scss的Sass源文件：

%$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass生成一个CSS文件，styles.css，带有sourceMappingURL注释：

h2 {  font-size: 26px;  color: red;  background-color: whitesmoke;
}/*# sourceMappingURL=styles.css.map */

下面是源映射文件的示例：

{  "version": "3",  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK",  "sources": ["sass/styles.scss"],  "file": "styles.css"}

验证WEB服务器是否支持Source Maps

一些Web服务器，例如 Google App Engine，需要对每个提供的文件类型进行显式配置。在这种情况下，您的 Source Maps 应该提供一个application/json的MIME类型，但Chrome实际上接受任何内容类型，例如application/octet-stream。

额外说明：通过自定义标头设置Source Maps

如果您不想在输出的文件中添加额外的注释，在压缩的JavaScript文件上使用 HTTP header 字段告诉DevTools在哪里可以找到源映射。这需要配置或自定义您的Web服务器，这超出本文档的范围。

X-SourceMap: /path/to/file.js.map

类似于注释，这会告诉DevTools和其他工具在哪里查找与JavaScript文件相关联的 Source Maps(源映射)。这个 header 字段还绕过了在不支持单行注释的语言中引用Source Maps(源映射)的问题。

支持的预处理器

几乎所有能编译到JavaScript语言的处理器，都有一个选项来生成 Source Maps(源映射) - 包括Coffeescript，TypeScript，JSX等等。您还可以在 Node 服务器端使用 Source Maps(源映射)，我们的CSS中通过Sass, Less等预处理，使用 browserify 给你带来节点式（node-style）的 require 能力，并通过诸如uglify-js的压缩工具，这也增加了生成多级 Source Maps(源映射)的能力。

JavaScript

编译器	命令	说明
CoffeeScript	`$ coffee -c square.coffee -m`	`-m` (`--map`)标志是编译器输出Source Maps(源映射)所必须的，它还将为你输出的文件添加sourceMapURL注释。
TypeScript	`$ tsc -sourcemap square.ts`	-sourcemap标志将生成映射并添加编译指示注释。
Traceur	`$ traceur --source-maps=[file\|inline]`	使用`--source-maps=file`，以`.js`结尾的每个输出文件都将有一个以`.map`结尾的Source Maps(源映射)文件;使用 `source-maps='inline'`，以`.js`结尾的每个输出文件都将以包含在`data:`URL编码中的sourcemap的注释结束。
Babel	`$ babel script.js --out-file script-compiled.js --source-maps`	使用`--source-maps`或`-s`生成Source Maps(源映射)。对于内联的Source Maps(源映射)使用`--source-maps inline`。
UglifyJS	`$ uglifyjs file.js -o file.min.js --source-map file.min.js.map`	这是生成`file.js` Source Maps(源映射)所需的基本命令。这也将添加添加编译指示注释到输出文件中。

CSS

编译器	命令	说明
Sass	`$ scss --sourcemap styles.scss styles.css`	从Sass 3.3开始支持 Source Maps(源映射)。
Less	`$ lessc styles.less > styles.css --source-map styles.css.map`	在1.5.0中实现。有关详细信息和使用模式，请参阅issue #1050。
Stylus	`$ stylus --sourcemaps styles.style styles.css`	这将把 sourcemap 作为一个base64编码字符串直接嵌入到输出文件中。
Compass	`$ sass --compass --sourcemap --watch scss:css`	或者，您可以添加`sourcemap: true`到您的`config.rb`文件。
Autoprefixer		点击链接查看如何使用它并解析输入sourcemap。

Source Maps(源映射)和DevTools

现在您已经可以正确地设置Source Maps(源映射)了，当你知道 Chrome DevTools 已内置支持基于CSS和JS的Source Maps(源映射)的时候，你可能会很高兴。

编辑预处理的CSS

点击查看编辑Sass，Less或Stylus，以了解如何直接在DevTools中编辑和刷新链接到源映射的样式。

编辑和调试预处理的JavaScript

详细了解如何在Sources(源文件)面板中调试压缩，编译或转译后的JavaScript代码。将预处理的代码映射到源代码。

在将预处理的代码映射到源代码文章中，详细了解如何在地图预处理代码的源代码面板中调试manified，compiled或transpiled JavaScript到源代码。