4. 使用预处理器——.vue文件

LXLong
162 阅读3分钟

在 webpack 中，所有的预处理器需要匹配对应的 loader。Vue Loader 允许使用其它 webpack loader 处理 Vue 组件的某一部分。Vue Loader 会根据 lang 特性以及webpack 配置中的规则自动推断出要使用的 loader。

1. Sass (Syntactically Awesome StyleSheets)

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

例如，为了通过 Sass/SCSS 编译<style> 标签：

npm install -D sass-loader node-sass

image.png

image.png 在 webpack 配置中：

module.exports = {
  module: {
    rules: [
      // ... 忽略其它规则

      // 普通的 `.scss` 文件和 `*.vue` 文件中的
      // `<style lang="scss">` 块都应用它
      {
        test: /.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // 插件忽略
}

现在，除了能够 import 'style.scss'，我们还可以在 Vue 组件中使用 SCSS：

<style lang="scss">
/* 在这里撰写 SCSS */
</style>

这个块里的任何内容都会被 webpack 当作在一个 *.scss 文件中一样被处理。

1.1 Sass vs SCSS

SASS（Syntactically Awesome Style Sheets）是一种由 Hampton Catlin 设计、Chris Eppstein 和 Natalie Weizenbaum 开发的样式表语言。 它是一种预处理器脚本语言，将被编译或解释为 CSS。 Sass Script 本身就是一种脚本语言。 它的 typing 规则是动态的。

SCSS 通常被称为 Sassy CSS，它是作为 SASS（Syntactically Awesome Style Sheets）的主要语法引入的，它建立在现有的 CSS 语法之上。 它使用分号和括号，如 CSS（级联样式表）。 SCSS 是 CSS 的超集，即所有 CSS 功能都将在 SCSS 中可用，并且包含 SASS（Syntactically Awesome Style Sheets）的一些功能。 SCSS 使任何 CSS 术语都有效。

注意 sass-loader 会默认处理不基于缩进的 scss 语法。为了使用基于缩进的 sass 语法，需要向这个 loader 传递选项：

// webpack.config.js -> module.rules
{
  test: /.sass$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        indentedSyntax: true,
        // sass-loader version >= 8
        sassOptions: {
          indentedSyntax: true
        }
      }
    }
  ]
}

1.2 Sass 共享全局变量

sass-loader 也支持一个 additionalData 选项，这个选项允许你在所有被处理的文件之间共享常见的变量，而不需要显式地导入它们：

// webpack.config.js -> module.rules
{
  test: /.scss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        // 你也可以从一个文件读取，例如 `variables.scss`
        // 如果 sass-loader 版本 = 8，这里使用 `prependData` 字段
        // 如果 sass-loader 版本 < 8，这里使用 `data` 字段
        additionalData: `$color: red;`
      }
    }
  ]
}

2. Less

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

image.png

npm install -D less less-loader

// webpack.config.js -> module.rules
{
  test: /.less$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'less-loader'
  ]
}

3. Stylus

Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似，所以近似脚本的方式去写CSS代码。

Stylus默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。

npm install -D stylus stylus-loader

// webpack.config.js -> module.rules
{
  test: /.styl(us)?$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'stylus-loader'
  ]
}

image.png

4. PostCSS

PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint） CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。

PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。在这之后，这个 API 便可被许多插件利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。

Vue Loader v15 不再默认应用 PostCSS 变换。需要通过 postcss-loader 使用 PostCSS。

image.png

npm install -D postcss-loader

// webpack.config.js -> module.rules
{
  test: /.css$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { importLoaders: 1 }
    },
    'postcss-loader'
  ]
}

PostCSS 的配置可以通过 postcss.config.js 或 postcss-loader 选项来完成。更多细节查阅 postcss-loader 文档。

image.png

postcss-loader 也可以和上述其它预处理器结合使用。

4. Babel

image.png

image.png

npm install -D babel-core babel-loader

image.png

// webpack.config.js -> module.rules
{
  test: /.js?$/,
  loader: 'babel-loader'
}

Babel 的配置可以通过 .babelrc 或 babel-loader 选项来完成。

image.png

image.png

4.1 Babel 排除 node_modules

exclude: /node_modules/ 在应用于 .js 文件的 JS 转译规则 (例如 babel-loader) 中是蛮常见的。鉴于 v15 中的推导变化，如果你导入一个 node_modules 内的 Vue 单文件组件，它的 <script> 部分在转译时将会被排除在外。

为了确保 JS 的转译应用到 node_modules 的 Vue 单文件组件，需要通过使用一个排除函数将它们加入白名单：

{
  test: /.js$/,
  loader: 'babel-loader',
  exclude: file => (
    /node_modules/.test(file) &&
    !/.vue.js/.test(file)
  )
}

5. TypeScript

npm install -D typescript ts-loader

// webpack.config.js
module.exports = {
  resolve: {
    // 将 `.ts` 添加为一个可解析的扩展名。
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      // ... 忽略其它规则
      {
        test: /.ts$/,
        loader: 'ts-loader',
        options: { appendTsSuffixTo: [/.vue$/] }
      }
    ]
  },
  // ...plugin omitted
}

TypeScript 的配置可以通过 tsconfig.json 来完成。也可以查阅 ts-loader 的文档。

6. Pug

pug，原名jade，是流行的HTML模板引擎，它是HAML在JavaScript上的实现，最大的特色是使用缩进排列替代成对标签。

Pug 的渲染操作相当简单。 pug.compile() 会把 Pug 代码编译成一个 JavaScript 函数，并且这个函数有一个参数可用于传入数据（局部变量，locals）。调用这个编译出来的函数，并且传入您的数据，这时返回的就是用您提供的数据渲染的 HTML 字符串了。

模板的处理会稍微有些不同，因为绝大多数 webpack 的模板类 loader，诸如 pug-loader，会返回一个模板函数而不是一个编译好的 HTML 字符串。所以我们需要使用一个返回原始的 HTML 字符串的 loader，例如 pug-plain-loader，而不是使用 pug-loader。

npm install -D pug pug-plain-loader

// webpack.config.js -> module.rules
{
  test: /.pug$/,
  loader: 'pug-plain-loader'
}

然后可以写：

<template lang="pug">
div
  h1 Hello world!
</template>

如果还打算使用它在 JavaScript 中将 .pug 文件作为字符串导入，你需要在这个预处理 loader 之后链上 raw-loader。注意添加 raw-loader 会破坏 Vue 组件内的用法，所以需要定义两条规则，其中一条指向使用了一个 resourceQuery 的 Vue 文件，另一条指向 (回退到) JavaScript 导入：

// webpack.config.js -> module.rules
{
  test: /.pug$/,
  oneOf: [
    // 这条规则应用到 Vue 组件内的 `<template lang="pug">`
    {
      resourceQuery: /^?vue/,
      use: ['pug-plain-loader']
    },
    // 这条规则应用到 JavaScript 内的 pug 导入
    {
      use: ['raw-loader', 'pug-plain-loader']
    }
  ]
}
avatar
文章
阅读
粉丝