上周，Andrew Blick在其网站上提交了一个问题。glamorous指出UMD构建的glamorous 不适用于React 16。问题是，glamorous 对模块做了一个懒惰的require，而在构建UMD时，显然是对prop-types模块，而显然在构建UMD捆绑包时，Rollup不能处理CommonJS的require，并使UMD从global 对象中传递它。
你可以看到这个问题在glamorous@4.9.5 UMD文件中看到这个问题。PropTypes 没有和global.Glamor 和global.React 一起被包含在最上面，这一事实表明了这个问题。如果你再往下看，你还会看到：PropTypes = require('prop-types')，而问题就出在这个require 语句上。由于前面提到的问题，它没有被转译。
这就是我们对我们的工具和它们的作者感到沮丧的部分，对吗？
绝对不是！我们要做的是，将复制的问题归档，并提出解决方案。我们所做的是，我们将一个问题提交给复制者，并建议一个解决方案然后，当维护者说他们对这个解决方案很满意时，我们就实施这个解决方案!Woo!
在我的例子中，我不知道从哪里开始，我也没有时间去进一步研究它（我有，毕竟刚生完第四个孩子不到两周）。 所以我提交了这个问题与转载，部分是为了验证这个问题是Rollup。然后我开始思考一个好的解决方法。
这里就是codegen的作用。babel-plugin-codegen是我写的一个babel插件，灵感来自我的另一个插件babel-plugin-preval.这两个插件都有一个babel-macro，而且它们都有一个配套的软件包，使使用起来更容易。
所以我安装了 codegen.macro 并从一个简单的PropTypes = require('prop-types') 改成了这个。
PropTypes = codegen`
if (process.env.BUILD_FORMAT === 'umd') {
module.exports = "(typeof window !== 'undefined' ? window : global).PropTypes"
} else {
module.exports = "require('prop-types')"
}
`
codegen 所做的是，它将采取你提供的代码字符串，并像普通模块一样运行它，然后它采取你导出的代码字符串，并将用该代码字符串替换自己。因为这是在构建时发生的，所以它是进行这类优化的一个好方法。
注意，一般来说，建议避免在一个字符串中放太多的代码，因为你会失去很多好处，比如语法高亮和提示性，所以如果里面有相当多的代码，你可以把它拉出来放到另一个文件里做。
PropTypes = codegen`module.exports = require('./prop-types-workaround')`
总之，我们所做的这些改变将使所有其他的构建保持原样，但对于UMD构建，它将从全局中提取PropTypes。
我喜欢这种解决方法的原因是，因为它使用的是babel-macro，涉及的魔法是相当优化和本地化的。因此，它比其他解决方法要直接得多，而且实际上只花了不到10分钟。
我希望这对你有帮助!祝大家好运!👍
