写一个 Webpack 的 Loader

通过前面章节的内容，对于 Webpack 的基础知识应该有了一个总体的了解。下面将以一个具体的实例来写一个 Webpack 的 Loader。这个 Loader 本身复用性并不高，它是我在开发中遇到的一个实际问题。通过这个例子的论述，对于如何写一个 Webpack 的 Loader 应该会有一个整体的把握。

写一个 Webpack 的 Loader

假如 Markdown 文件的主要内容如下（完整内容查看这里）：

import { Button } from 'antd';
ReactDOM.render(
  <div>
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="danger">Danger</Button>
  </div>
, mountNode);

此时，希望使用 Webpack 的 Loader 来加载这个 Markdown 文件的内容。那么很显然，我们就是要写一个相应的 Loader，比如在 webpack.config.js 中添加如下的配置：
module.exports = {
module:{
rule:[
{
test: /.md$/,
loaders: [
require.resolve("babel-loader"),
require.resolve("./markdownDemoLoader.js")
]
}]
}
}
其中 markdownDemoLoader.js 就是我们需要完成的 Webpack 的 Loader。在这个 Loader 中有如下的代码：

const loaderUtils =  require('loader-utils');
const Grob = require('grob-files');
const {p2jsonml} = require('./utils/pc2jsonml');
const transformer = require('./utils/transformer');
const Smangle = require('string-mangle');
const generator = require('babel-generator').default;
const pwd = process.cwd();
const fs = require('fs');
const path = require('path');
const util = require('util');
/**
 *第一个参数是 Markdown 的内容
 */
module.exports = function markdown2htmlPreview (content){
  //缓存该模块
  if (this.cacheable) {
    this.cacheable();
  }
  const loaderIndex = this.loaderIndex;
  //打印 this 可以得到所有的信息，这里得到 MD 处理文件的 loader 数组中，当前 loader 所在的下标
  const query = loaderUtils.getOptions(this);
  const lang = query&&query.lang || 'react-demo';
  //获取 Loader 的 query 字段
  const processedjsonml=Smangle.stringify(p2jsonml(content));
  //得到 jsonml
  const astProcessed = `module.exports = ${processedjsonml}`;
  //每一个 Loader 导出的内容都是 module.exports
  const res = transformer(astProcessed,lang);
  //将得到的 jsonml 内容进一步的处理
  const inputAst = res.inputAst;
  const imports = res.imports;
  for (let k = 0; k < imports.length; k++) {
    inputAst.program.body.unshift(imports[k]);
  const code = generator(inputAst, null, content).code;
  //回到 ES6 代码
  const processedCode= 'const React =  require(\'react\');\n' +
        'const ReactDOM = require(\'react-dom\');\n'+
        code;
  return processedCode;
  }
}

现在看看 Loader 编写中常用的方法：

if (this.cacheable) {
    this.cacheable();
  }

我们知道 Loader 加载的结果默认是缓存的，如果不想缓存可以使用 this.cacheable(false); 去阻止缓存。一个可以缓存的 Loader 必须满足一定的条件，即当输入和模块依赖关系没有发生变化的情况下，输出默认是确定的。也就是说，这个模块除了通过 this.addDependency 添加的模块依赖以外没有任何其他的模块依赖。

const loaderIndex = this.loaderIndex;

这个表示当前 Loader 在加载特定文件的时候所在的下标。
在上面这个 Loader 中，首先原样传入 Markdown 文件的内容，然后将它转化为 jsonml，来看看上面的 jsonml.js 的内容：

const markTwain = require('mark-twain');
const path = require('path');
function p2jsonml(fileContent){
  const markdown = markTwain(fileContent);
  return markdown;
};
module.exports = {
  p2jsonml
}

转化为 jsonml 格式以后，将会得到如下的内容：

module.exports = { "content": [ "article", [ "h3", "1.mark-twain 解析出来的无法解析成为 ast" ], [ "pre", { "lang": "jsx" }, [ "code", "import { Button } from 'antd';\nReactDOM.render(\n

\n <Button type="primary" shape="circle" icon="search" />\n <Button type="primary" icon="search">Search\n <Button shape="circle" icon="search" />\n <Button icon="search">Search\n 
\n <Button type="ghost" shape="circle" icon="search" />\n <Button type="ghost" icon="search">Search\n <Button type="dashed" shape="circle" icon="search" />\n <Button type="dashed" icon="search">Search\n
,\n mountNode\n);" ] ] ], "meta": {
} }

但是这并不是希望的结果，我们需要继续如下的处理，其中目的只有一个：将 ReactDOM.render 中第一个参数的值放到一个独立的函数中，函数的名字为 jsonmlReactLoader：

const babylon = require('babylon');
const types = require('babel-types');
const traverse = require('babel-traverse').default;
function parser(content) {
  return babylon.parse(content, {
    sourceType: 'module',
    plugins: [
      'jsx',
      'flow',
      'asyncFunctions',
      'classConstructorCall',
      'doExpressions',
      'trailingFunctionCommas',
      'objectRestSpread',
      'decorators',
      'classProperties',
      'exportExtensions',
      'exponentiationOperator',
      'asyncGenerators',
      'functionBind',
      'functionSent',
    ],
  });
}
module.exports = function transformer(content, lang) {
  let imports = [];
  const inputAst = parser(content);
  traverse(inputAst, {
    ArrayExpression: function(path) {
      const node = path.node;
      const firstItem = node.elements[0];
      //tagName
      const secondItem = node.elements[1];
      //attributes or child element
      let renderReturn;
      if (firstItem &&
        firstItem.type === 'StringLiteral' &&
        firstItem.value === 'pre' &&
        secondItem.properties[0].value.value === lang) {
        let codeNode = node.elements[2].elements[1];
        let code = codeNode.value;
        //得到代码的内容了，也就是 demo 的代码内容
        const codeAst = parser(code);
        //继续解析代码内容~~~
        traverse(codeAst, {
          ImportDeclaration: function(importPath) {
            imports.push(importPath.node);
            importPath.remove();
          },
          CallExpression: function(CallPath) {
            const CallPathNode = CallPath.node;
            if (CallPathNode.callee &&
              CallPathNode.callee.object &&
              CallPathNode.callee.object.name === 'ReactDOM' &&
              CallPathNode.callee.property &&
              CallPathNode.callee.property.name === 'render') {
              //we focus on ReactDOM.render method
              renderReturn = types.returnStatement(
                 CallPathNode.arguments[0]
              );
              //we focus on first parameter of ReactDOM.render method
              CallPath.remove();
            }
          },
        });
        const astProgramBody = codeAst.program.body;
        const codeBlock = types.BlockStatement(astProgramBody);
        if (renderReturn) {
          astProgramBody.push(renderReturn);
        }
        const coceFunction = types.functionExpression(
          types.Identifier('jsonmlReactLoader'),
          [],
        );
        path.replaceWith(coceFunction);
      }
    },
  });
  return {
    imports: imports,
    inputAst: inputAst,
  };
};

经过上面的代码处理，可以清楚的看到 Markdown 文件内容变成了如下的格式了：

const React =  require('react');
const ReactDOM = require('react-dom');
import { Button } from 'antd';
module.exports = {
  "content": ["article", ["h3", "1.mark-twain解析出来的无法解析成为ast"], function jsonmlReactLoader() {
    return <div>
    <Button type="primary" shape="circle" icon="search" />
    <Button type="primary" icon="search">Search</Button>
    <Button shape="circle" icon="search" />
    <Button icon="search">Search</Button>
    <br />
    <Button type="ghost" shape="circle" icon="search" />
    <Button type="ghost" icon="search">Search</Button>
    <Button type="dashed" shape="circle" icon="search" />
    <Button type="dashed" icon="search">Search</Button>
  </div>;
  }],
  "meta": {}
};

此时的模块依然是 ES6 格式与 jsx 混合的代码，我们需要进一步配合 babel 来处理将它转化为 ES5 代码，所以 webpack.config.js 中才会在该插件后引入 babel-loader 来对代码进行进一步的打包。那么你可能会想，就算 babel 打包后，得到上面这样的代码会有什么用？来看看，在前端是如何将这样的代码转化为 React 类型的：

import ReactDOM from "react-dom";
import React from "react";
const content =  require('../../demos/basic.md');
const converters = [
      [
        function(node) { return typeof node === 'function'; },
        function(node, index) {
          return React.cloneElement(node(), { key: index });
        }
      ]
    ];
//(2)converters 可以引入一个库来完成
const JsonML = require('jsonml.js/lib/utils');
const toReactComponent = require('jsonml-to-react-component');
ReactDOM.render(toReactComponent(content.content,converters), document.getElementById('react-content'));

是不是很容易理解了，Loader 处理后的代码，最后会被原样转化为 React 的组件并在页面中展示，当然这个过程必须经过 jsonml-to-react-element 的转化。所以说，Loader 完成了 Markdown 文件类型到我们最后的 JavaScript 模块的转化。这就是 Webpack 中 Loader 的强大作用。