为微信小程序扩展自定义babel编译功能

摘要

一直以来，微信小程序都自带babel编译，帮我们解决微信小程序中的api和语法差异，其实吧，微信小程序的es6支持已经是比较完善的了，我们翻看官网的es6语法支持可以发现，小程序（下文小程序都指代微信小程序）本身除了proxy以及Array.values等方法之外，其他的es6的api大多数都已经原生支持了，但我们为什么还需要babel进行js的代码编译呢？

一个是官方文档所说的平台差异，iso和安卓之间的api支持不同，使用babel可以弥补这一点。第二个就是我们想要追求编码体验，想要使用一些新的js语法来提高自己的编程体验，但是微信小程序中无法自定义babel编译，来添加一些新的语法插件以及presets来支持新的语法，那该怎么办呢？其实我本身是没考虑过那么多的，因为我一般用微信自带的es6转es5就够了，最多加个regenerator-runtime以支持async/await，不过之前我看了一下flow，想着类型检查还是很有用的，而typeScript不是一朝一夕就可以直接上手的（小程序已经支持typeScript了），我苦思冥想，想着怎么在微信小程序中使用flow（我怎么老有这些奇怪的想法？苦笑···）研究了一段时间，想了一个办法，不过其实也不是什么办法咯：

利用babel-cli将你需要编译的js先通过自己配置的babel编译一遍，然后再交由微信小程序的es6转es5编译一遍即可。或者你可以直接完全抛弃微信自带的babel编译，完全使用自己配置的babel去编译你的代码。

其实就是很简单，使用自己的配置的babel来编译你的代码，而不是通过微信小程序自带的babel编译，说起来很简单，但是在我研究过程中，还是遇到了一些坑，不过我还是总结了一些东西出来的，这些总结可以帮你解决小程序没有自定义babel编译的困扰，不过有些东西还是需要注意的。我就先通过怎么在微信小程序中使用flow来作为切入点（希望不要翻车）来展示一下我的总结吧。

ps：flow是一个js的静态类型检查工具，这里不做详细的赘述，也不会讲flow，而是以使用babel编译flow为例子，想要了解flow的，可以看其官网：https://flow.org/

使用babel

babel其实大家都比较熟悉了啊，这里就不再介绍babel的什么了，这里使用的是babel7作为参考的，这里就简单过一下。

首先你最少需要在你小程序的根目录中，使用npm安装两个babel库，@babel/core和@babel/cli，这两个一个用来提供核心的babel编译，一个用来提供命令行操作。@babel/core就是babel编译的核心，如果你在babel的配置中（.babelrc）什么也没有配置，然后使用@babel/cli编译这个js文件，那其实他差不多就是原样输出罢了（注意这里是差不多，如果有语法错误，那肯定是通不过babel的编译，他是一个code => ast => code的过程），所以，你需要配置一些语法编译的预设和插件，来告诉babel遇到某些语法时帮我编译这些语法，我这里以编译flow为例，所以安装了一个@babel/flow，然后配置的.bablerc文件如下：

{
  "presets": ["@babel/flow"]
}

好了，差不多babel的安装和配置就这些了，至少对于flow的编译来说，至于babel-cli的命令我们会在讲编译js时再列出来。

ps：babel的插件就是告诉babel遇到某些语法时，怎样编译这些语法，而babel的preset预设其实可以看作就是一些babel插件的集合。

微信小程序项目结构

既然我们需要自己使用babel进行js的编译，那么项目结构也需要变一变，一般，我的小程序的pages文件夹放在根目录，但是啊，既然自己配置编译，那么编译后的页面文件肯定就不是pag