Webpack实战——使用新语言

2019-07-31 本文已影响0人 oWSQo

使用ES6语言

虽然目前部分浏览器和Node.js已经支持ES6，但由于它们对ES6所有的标准支持不全，这导致在开发中不敢全面地使用ES6。
通常我们需要把采用ES6编写的代码转换成目前已经支持良好的ES5代码，这包含2件事：

把新的ES6语法用ES5实现，例如ES6的class语法用ES5的prototype实现。
给新的API注入polyfill，例如项目使用fetch API时，只有注入对应的polyfill后，才能在低版本浏览器中正常运行。

Babel

Babel可以方便的完成以上2件事。 Babel是一个JavaScript编译器，能将ES6代码转为ES5代码，让你使用最新的语言特性而不用担心兼容性问题，并且可以通过插件机制根据需求灵活的扩展。在Babel执行编译的过程中，会从项目根目录下的.babelrc文件读取配置。.babelrc是一个JSON格式的文件，内容大致如下：

{
  "plugins": [
    [
      "transform-runtime",
      {
        "polyfill": false
      }
    ]
   ],
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "stage-2",
    "react"
  ]
}

Plugins

plugins属性告诉Babel要使用哪些插件，插件可以控制如何转换代码。
以上配置文件里的transform-runtime对应的插件全名叫做babel-plugin-transform-runtime，即在前面加上了babel-plugin-，要让Babel正常运行我们必须先安装它：

npm i -D babel-plugin-transform-runtime

babel-plugin-transform-runtime是 Babel官方提供的一个插件，作用是减少冗余代码。 Babel在把ES6代码转换成ES5代码时通常需要一些ES5写的辅助函数来完成新语法的实现，例如在转换class extent语法时会在转换后的ES5代码里注入 _extent 辅助函数用于实现继承：

function _extent(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];
    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }
  return target;
}

这会导致每个使用了class extent语法的文件都被注入重复的_extent辅助函数代码，babel-plugin-transform-runtime的作用在于不把辅助函数内容注入到文件里，而是注入一条导入语句：

var _extent = require('babel-runtime/helpers/_extent');

这样能减小Babel编译出来的代码的文件大小。
同时需要注意的是由于babel-plugin-transform-runtime注入了require('babel-runtime/helpers/_extent')语句到编译后的代码里，需要安装babel-runtime依赖到你的项目后，代码才能正常运行。也就是说babel-plugin-transform-runtime和babel-runtime需要配套使用，使用了 babel-plugin-transform-runtime后一定需要babel-runtime。

Presets

presets 属性告诉 Babel 要转换的源码使用了哪些新的语法特性，一个 Presets 对一组新语法特性提供支持，多个 Presets 可以叠加。 Presets 其实是一组 Plugins 的集合，每一个 Plugin 完成一个新语法的转换工作。Presets 是按照 ECMAScript 草案来组织的，通常可以分为以下三大类：

已经被写入 ECMAScript 标准里的特性，由于之前每年都有新特性被加入到标准里，所以又可细分为：
- es2015 包含在2015里加入的新特性；
- es2016 包含在2016里加入的新特性；
- es2017 包含在2017里加入的新特性；
- env 包含当前所有 ECMAScript 标准里的最新特性。
它们之间的关系如图：

被社区提出来的但还未被写入ECMAScript标准里特性，这其中又分为以下四种：
- stage0 只是一个美好激进的想法，有Babel插件实现了对这些特性的支持，但是不确定是否会被定为标准；
- stage1 值得被纳入标准的特性；
- stage2 该特性规范已经被起草，将会被纳入标准里；
- stage3 该特性规范已经定稿，各大浏览器厂商和 Node.js 社区开始着手实现；
- stage4 在接下来的一年将会加入到标准里去。

它们之间的关系如图：

为了支持一些特定应用场景下的语法，和ECMAScript标准没有关系，例如babel-preset-react是为了支持React开发中的JSX语法。

在实际应用中，你需要根据项目源码所使用的语法去安装对应的 Plugins 或 Presets。

接入Babel

由于Babel所做的事情是转换代码，所以应该通过Loader去接入Babel，Webpack配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
    ]
  },
  // 输出 source-map 方便直接调试 ES6 源码
  devtool: 'source-map'
};

配置命中了项目目录下所有的JavaScript文件，通过babel-loader去调用Babel完成转换工作。在重新执行构建前，需要先安装新引入的依赖：

# Webpack 接入 Babel 必须依赖的模块
npm i -D babel-core babel-loader 
# 根据你的需求选择不同的 Plugins 或 Presets
npm i -D babel-preset-env

使用TypeScript语言

TypeScript是JavaScript的一个超集，主要提供了类型检查系统和对ES6语法的支持，但不支持新的API。目前没有任何环境支持运行原生的TypeScript代码，必须通过构建把它转换成JavaScript代码后才能运行。
改造下前面用过的例子 Hello,Webpack，用TypeScript重写JavaScript。由于TypeScript是JavaScript的超集，直接把后缀.js改成.ts是可以的。但为了体现出TypeScript的不同，我们重写JavaScript代码为如下，加入类型检查：

// show.ts
// 操作 DOM 元素，把 content 显示到网页上
// 通过 ES6 模块规范导出 show 函数
// 给 show 函数增加类型检查 
export function show(content: string) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}
// main.ts
// 通过 ES6 模块规范导入 show 函数
import {show} from './show';
// 执行 show 函数
show('Webpack');

TypeScript官方提供了能把TypeScript转换成JavaScript的编译器。你需要在当前项目根目录下新建一个用于配置编译选项的tsconfig.json文件，编译器默认会读取和使用这个文件，配置文件内容大致如下：

{
  "compilerOptions": {
    "module": "commonjs", // 编译出的代码采用的模块规范
    "target": "es5", // 编译出的代码采用 ES 的哪个版本
    "sourceMap": true // 输出 Source Map 方便调试
  },
  "exclude": [ // 不编译这些目录里的文件
    "node_modules"
  ]
}

通过npm install -g typescript安装编译器到全局后，你可以通过tsc hello.ts命令编译出 hello.js 和 hello.js.map 文件。

减少代码冗余

TypeScript编译器会有和Babel一样的问题：在把ES6语法转换成ES5语法时需要注入辅助函数，为了不让同样的辅助函数重复的出现在多个文件中，可以开启TypeScript编译器的importHelpers选项，修改tsconfig.json文件如下：

{
  "compilerOptions": {
    "importHelpers": true
  }
}

该选项的原理和babel-plugin-transform-runtime非常类似，会把辅助函数换成如下导入语句：

var _tslib = require('tslib');
_tslib._extend(target);

这会导致编译出的代码依赖tslib这个迷你库，但避免了代码冗余。

集成Webpack

要让Webpack支持TypeScript，需要解决以下2个问题：

通过Loader把TypeScript转换成JavaScript。
Webpack在寻找模块对应的文件时需要尝试ts后缀。

对于问题1，社区已经出现了几个可用的Loader，推荐速度更快的awesome-typescript-loader。对于问题2，我们需要修改默认的resolve.extensions配置项。相关Webpack配置如下：

const path = require('path');

module.exports = {
  // 执行入口文件
  entry: './main',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  resolve: {
    // 先尝试 ts 后缀的 TypeScript 源码文件
    extensions: ['.ts', '.js'] 
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  },
  devtool: 'source-map',// 输出 Source Map 方便在浏览器里调试 TypeScript 代码
};

在运行构建前需要安装上面用到的依赖：

npm i -D typescript awesome-typescript-loader

安装成功后重新执行构建，你将会在dist目录看到输出的JavaScript 文件bundle.js，和对应的Source Map文件bundle.js.map。在浏览器里打开index.html页面后，来开发工具里可以看到和调试用TypeScript编写的源码。

使用Flow检查器

认识 Flow

Flow是一个Facebook开源的JavaScript静态类型检测器，它是JavaScript语言的超集。你所需要做的就是在需要的地方加上类型检查，例如在两个由不同人开发的模块对接的接口出加上静态类型检查，能在编译阶段就指出部分模块使用不当的问题。同时Flow也能通过类型推断检查出JavaScript代码中潜在的Bug。
Flow使用效果如下：

// @flow
// 静态类型检查
function square1(n: number): number {
  return n * n;
}
square1('2'); // Error: square1 需要传入 number 作为参数

// 类型推断检查
function square2(n) {
  return n * n; // Error: 传入的 string 类型不能做乘法运算
}
square2('2');

需要注意的时代码中的第一行 // @flow 告诉 Flow 检查器这个文件需要被检查。

使用Flow

以上只是让你了解Flow的功能，下面教你如何运行Flow去检查代码。 Flow检测器由高性能跨平台的OCaml语言编写，它的可执行文件可以通过

npm i -D flow-bin

安装，安装完成后通过先配置Npm Script

"scripts": {
   "flow": "flow"
}

再通过npm run flow去调用Flow执行代码检查。
除此之外还可以通过

npm i -g flow-bin

把Flow安装到全局后，再直接通过flow命令去执行代码检查。
安装成功后，在项目根目录下执行Flow后，Flow会遍历出所有需要检查的文件并对其进行检查，输出错误结果到控制台，例如：

Error: show.js:6
  6: export function show(content) {
                          ^^^^^^^ parameter `content`. Missing annotation

Found 1 error

采用了Flow静态类型语法的JavaScript是无法直接在目前已有的JavaScript引擎中运行的，要让代码可以运行需要把这些静态类型语法去掉。例如：

// 采用 Flow 的源代码
function foo(one: any, two: number, three?): string {}
// 去掉静态类型语法后输出代码
function foo(one, two, three) {}

有两种方式可以做到这点：

flow-remove-types 可单独使用，速度快。
babel-preset-flow 与 Babel 集成。

集成Webpack

由于使用了Flow项目一般都会使用ES6语法，所以把Flow集成到使用Webpack构建的项目里最方便的方法是借助Babel。加入Flow代码检查，如下：

安装npm i -D babel-preset-flow依赖到项目。
修改.babelrc配置文件，加入Flow Preset：

"presets": [
  ...[],
  "flow"
]

往源码里加入静态类型后重新构建项目，你会发现采用了Flow的源码还是能正常在浏览器中运行。
要明确构建的目的只是为了去除源码中的Flow静态类型语法，而代码检查和构建无关。许多编辑器已经整合Flow，可以实时在代码中高亮指出Flow检查出的问题。

使用SCSS语言

认识 SCSS

SCSS可以让你用更灵活的方式写CSS。它是一种CSS预处理器，语法和CSS相似，但加入了变量、逻辑、等编程元素，代码类似这样：

$blue: #1875e7;　
div {
  color: $blue;
}

SCSS又叫SASS，区别在于SASS语法类似Ruby，而SCSS语法类似CSS，对于熟悉CSS的前端工程师来说会更喜欢 SCSS。
采用SCSS去写CSS的好处在于可以方便地管理代码，抽离公共的部分，通过逻辑写出更灵活的代码。和SCSS类似的CSS预处理器还有LESS 等。
使用SCSS可以提升编码效率，但是必须把SCSS源代码编译成可以直接在浏览器环境下运行的CSS代码。 SCSS官方提供了多种语言实现的编译器，由于本书更倾向于前端工程师使用的技术栈，所以主要来介绍下 node-sass。

node-sass核心模块是由C++编写，再用Node.js封装了一层，以供给其它Node.js调用。node-sass还支持通过命令行调用，先安装它到全局：

npm i -g node-sass

再执行编译命令：

# 把 main.scss 源文件编译成 main.css
node-sass main.scss main.css

你就能在源码同目录下看到编译后的main.css文件。

接入Webpack

由于需要把SCSS源代码转换成CSS代码，转换文件最适合的方式是使用Loader，Webpack官方提供了对应的sass-loader。
Webpack接入sass-loader相关配置如下：

module.exports = {
  module: {
    rules: [
      {
        // 增加对 SCSS 文件的支持
        test: /\.scss/,
        // SCSS 文件的处理顺序为先 sass-loader 再 css-loader 再 style-loader
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ]
  },
};

以上配置通过正则/\.scss/匹配所有以.scss 为后缀的SCSS文件，再分别使用3个Loader去处理。具体处理流程如下：

通过sass-loader把SCSS源码转换为CSS代码，再把CSS代码交给css-loader去处理。
css-loader会找出CSS代码中的@import和url()这样的导入语句，告诉Webpack依赖这些资源。同时还支持CSS Modules、压缩CSS等功能。处理完后再把结果交给style-loader去处理。
style-loader会把CSS代码转换成字符串后，注入到JavaScript代码中去，通过JavaScript去给DOM增加样式。如果你想把CSS代码提取到一个单独的文件而不是和JavaScript混在一起，可以使用ExtractTextPlugin。

由于接入sass-loader，项目需要安装这些新的依赖：

# 安装 Webpack Loader 依赖
npm i -D  sass-loader css-loader style-loader
# sass-loader 依赖 node-sass
npm i -D node-sass

使用PostCSS

认识 PostCSS

PostCSS是一个CSS处理工具，和SCSS不同的地方在于它通过插件机制可以灵活的扩展其支持的特性，而不是像 SCSS 那样语法是固定的。 PostCSS的用处非常多，包括给CSS自动加前缀、使用下一代CSS语法等。
PostCSS和CSS的关系就像Babel和JavaScript的关系，它们解除了语法上的禁锢，通过插件机制来扩展语言本身，用工程化手段给语言带来了更多的可能性。
PostCSS和SCSS的关系就像Babel和TypeScript的关系，PostCSS更加灵活、可扩张性强，而SCSS内置了大量功能而不能扩展。
让我们来看一些例子。给CSS自动加前缀，增加各浏览器的兼容性：

/*输入*/
h1 {
  display: flex;
}
/*输出*/
h1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

使用下一代CSS语法：

/*输入*/
:root {
  --red: #d33;
}
h1 {
  color: var(--red);
}
/*输出*/
h1 { 
  color: #d33;
}

PostCSS全部采用JavaScript编写，运行在Node.js之上，即提供了给JavaScript代码调用的模块，也提供了可执行的文件。在PostCSS启动时，会从目录下的postcss.config.js文件中读取所需配置，所以需要新建该文件，文件内容大致如下：

module.exports = {
  plugins: [
    // 需要使用的插件列表
    require('postcss-cssnext')
  ]
}

其中的postcss-cssnext插件可以让你使用下一代CSS语法编写代码，再通过PostCSS转换成目前的浏览器可识别的CSS，并且该插件还包含给CSS自动加前缀的功能。
目前Chrome等现代浏览器已经能完全支持cssnext中的所有语法，也就是说按照cssnext语法写的CSS在不经过转换的情况下也能在浏览器中直接运行。

接入Webpack

虽然使用PostCSS后文件后缀还是.css 但这些文件必须先交给postcss-loader处理一遍后再交给css-loader。
接入PostCSS相关的Webpack配置如下：

module.exports = {
  module: {
    rules: [
      {
        // 使用 PostCSS 处理 CSS 文件
        test: /\.css/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ]
  },
};

接入PostCSS给项目带来了新的依赖需要安装，如下：

# 安装 Webpack Loader 依赖
npm i -D postcss-loader css-loader style-loader
# 根据你使用的特性安装对应的 PostCSS 插件依赖
npm i -D postcss-cssnext

Webpack实战——使用新语言

使用ES6语言

Babel

Plugins

Presets

接入Babel

使用TypeScript语言

减少代码冗余

集成Webpack

使用Flow检查器

认识 Flow

使用Flow

集成Webpack

使用SCSS语言

认识 SCSS

接入Webpack

使用PostCSS

认识 PostCSS

接入Webpack

猜你喜欢

热点阅读