08 | 探索前端工具链生态，制定一个统一标准化 babel-preset

前端生态有着与生俱来的混乱和与之抗衡的秩序，有着新生力量的崛起以及随之而来的规范约束。在这个背景下，正面来看，欣欣向荣的前端生态带来了广阔的发展前景，但也造成了一些困扰。比如，我们都经历过在前端基础设施建设中，被各种冗杂的配置项困扰，一不小心就是 Error，步履蹒跚。也许我们可以通过搜索引擎暂时解决问题，但是恍恍惚惚、难以洞悉问题本源。

另一方面，前端生态的重要一环是公共库。公共库的模块化规范、编译标准，甚至压缩方式都有讲究，同时公共库与使用它们的业务项目也要密切配合，这样才能打造一个顺滑的基建结果。请你仔细审视手上的项目，编译构建过程是否做到了最高效，产出代码是否达到了最高级别的安全保障，是否做到了性能体验的最佳实践？

这一讲，就让我们从公共库的角度出发，梳理当前前端生态，最终还原一个趋近完美的公共库设计标准。

从一个公共库处理的问题，谈如何做好“扫雷人”

这一部分，让我们以一篇网红文章“报告老板，我们的 H5 页面在 iOS 11 系统上白屏了！”开始，我先简单梳理和总结一下文章内容：

笔者发现某些机型上出现页面白屏情况；

出现在报错页面上的信息非常明显，即当前浏览器不支持…扩展运算符；

出错的代码（使用了扩展运算符的代码）属于某个公共库代码，它没有使用 Babel 插件进行降级处理，因此线上源代码出现了…扩展运算符。

现在问题找到了，或许直接将出现问题的公共库代码用 Babel 进行编译降级就可以了，但问题似乎还会更加复杂。在文中环境下，需要在vue.config.js中加入对问题公共库module-name/library-name的 Babel 编译流程：

复制代码
transpileDependencies: [
‘module-name/library-name’ // 出现问题的那个库
],
vue-cli 对transpileDependencies 也有如下说明：

默认情况下 babel-loader 会忽略所有node_modules中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。

按照上述操作，却得到了新的报错：Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘#