1. 后编译介绍

目前大部分的前端项目开发都是使用es6+的代码并且使用babel进行编译，而传统的对代码包的引入都是引入一个被babel编译好的文件入口，这样带来了一个缺点，那就是项目中无用的代码也会被引入到最终打包的文件中。

后编译的思想是不会在包发布的时候进行编译，而是会在使用这个包的前端项目构建的时候进行编译。

下面就来看一下cube-ui对更好的使用后编译作出的探索。

2. 后编译遇到的问题

2.1 后编译和普通编译的兼容

由于webpack的开发团队也考虑到直接引入一个编译好的代码包带来的一些问题，所以在webpack2.x之后引入了一个属性。

module.exports = {

  // ...

  resolve: {

    mainFields: ["browser", "module", "main"]

  }

  // ...

}

mainFields: ["module", "main"]

module.exports = {

  // ...

  resolve: {

    alias: {

      // ...

      "cube-ui": "cube-ui/lib"

    }

  }

  // ...

}

import Switch from 'cube-ui/src/modules/switch'

import {Switch} from 'cube-ui'

{

  // ...

  "transformModules": {

    "cube-ui": {

      "transform": "cube-ui/src/modules/${member}",

      "kebabCase": true

    }

  },

  // ...

}

var PostCompilePlugin = require('webpack-post-compile-plugin')

var TransformModulesPlugin = require('webpack-transform-modules-plugin')

module.exports = {

  // ...

  plugins: [

    // ...

    new PostCompilePlugin(),

    new TransformModulesPlugin()

  ]

  // ...

}

module.exports = {

  // ...

  module: {

    rules: [

      // ...

      {

        test: /\.js$/,

        loader: 'babel-loader',

        // 注意这里的 include

        // 除了 src 还包含了额外的 node_modules 下的两个包

        include: [

            resolve('src'),

            resolve('node_modules/A'),

            resolve('node_modules/B')

          ]

      },

      // ...

    ]

  },

  // ...

}

cube-ui团队为了解决这种情况开发了webpack插件webpack-post-compile-plugin，通过这个插件可以通过获取package.json文件中的compileDependencies属性来获取当前包依赖的后编译包，并且将这些包添加到webpack配置的rules.include中。

webpack-post-compile-plugin插件的核心代码如下：

PostCompilePlugin.prototype.apply = function (compiler) {

  var that = this

  compiler.plugin(['before-run', 'watch-run'], function (compiler, callback) {

    // ...

    var dependencies = that._collectCompileDependencies(compiler)

    if (dependencies.length) {

      var rules = compiler.options.module.rules

      rules && rules.forEach(function (rule) {

        if (rule.include) {

          if (!Array.isArray(rule.include)) {

            rule.include = [rule.include]

          }

          rule.include = rule.include.concat(dependencies)

        }

      })

    }

    callback()

  })

}