白鹭编译器

背景

白鹭引擎在 5.3.6 版本中加入了对 Webpack 的支持，通过 webpack ，开发者可以大幅改善项目的增量编译效率，并可以充分使用 npm 上丰富的 JavaScript 第三方库。

在2014年初白鹭引擎首次发布时，JavaScript语言尚未提出 ECMAScript Module 标准（即 import / export 语法），这为 JavaScript 多个文件的加载顺序带来了很大的挑战，例如：

//a.ts
class A extends B {
}
//b.ts
class B {
}
// 必须先加载 b.ts 再加载 a.ts，否则会报错提示找不到B

之所以开发者使用白鹭引擎时感知不到上述问题，是因为白鹭引擎一直采用了内部独有的一套排序算法解决模块依赖问题。

随着 ECMAScript Module标准的落地，现代 JavaScript 语言更推荐使用如下的写法：

// a.ts
import { B } from './b'
class A extends B {
}
// b.ts
export class B {
}

通过 Webpack 等打包工具进行分析打包，由于语言层面已经显式设置了依赖项，所以对比白鹭引擎的排序算法有极大的编译速度提升空间。因此白鹭引擎推荐开发者使用 ECMAScript Module 标准语法进行业务逻辑开发

如何使用

我们为开发者准备了两个新的构建管线插件，分别称为 WebpackDevServerPlugin 和 WebpackBundlePlugin 。只要引入这两个插件，开发者就可以直接使用 Webpack 进行打包。

对于完全采用 ECMAScript Module标准语法的项目而言，Webpack会识别其 import/export 语法进行排序分析，但是对现有项目而言，开发者可能不希望将全部代码手动添加 import/export 等逻辑，因此我们还为开发者准备了一种向下兼容的模式，名为 legacy 模式（与完全采用ECMAScript Module标准的 modern 模式对应）。以下表格为这两种模式以及传统模式这三者的对比。

	传统模式	legacy 模式	modern 模式
编译速度	很慢	很快	最快
适用范围	不再建议	现有项目	新项目
是否使用ES6 Module	不使用	可选使用	必须使用
现有项目改造成本	无	半天	七天

您只需要在项目中使用 WebpackDevServerPlugin 和 WebpackBundlePlugin 这两个插件，就可以使用 legacy 模式或者 modern 模式进行开发，最简单的方式就是使用新版本引擎创建一个项目并将相关构建脚本拷贝至您的现有项目中

• 现有项目如何升级至 Legacy 模式
• 现有项目如何升级至 Modern 模式

发布至其他平台

上述教程只是实现了在发布到 web 平台中的逻辑，如果想发布至 iOS / Android / 微信小游戏等其他平台，开发者需要修改 config.ios.ts , config.android.ts , config.wxgame.ts 等相关逻辑。

发布到小游戏平台时，请修改 scripts/wxgame/wxgame.ts 文件，去除在 main.js 中添加 window.Main = Main 的这一逻辑。