我正在尝试使用优化的Mobx es6构建,如文档所示:
提示: MobX 5包的主要入口点附带了ES5代码,以便与所有构建工具进行向后兼容性。但是,由于MobX 5只在现代浏览器上运行,所以考虑使用更快、更小的ES6构建: lib/mobx.es6.js。例如,通过设置webpack别名:
resolve: { alias: { mobx: __dirname + "/node_modules/mobx/lib/mobx.es6.js" }}
https://mobx.js.org/README.html#browser-support
这允许我导入mobx
并获取mobx.es6.js
构建:
import mobx from 'mobx' // Yay, es6 build!!!
这对于Webpack的项目非常有用,比如电子项目,我已经在那里工作了。
对于React,我可以在extraNodeModules
中指定metro.config.js
,如下所示:
module.exports = {
resolver: {
extraNodeModules: {
"mobx": path.resolve(__dirname, 'node_modules/mobx/lib/mobx.es6.js'),
},
},
};
我猜想,...except不起作用,因为mobx
依赖于自己解决得很好,所以这个配置选项永远不会被选中。
我可以为mobx
使用单独的别名,如mobx-es6
,但这并不理想,可以这么说:
module.exports = {
resolver: {
extraNodeModules: {
// Nooo I don't want to update a bazillion source files!.
"mobx-es6": path.resolve(__dirname, 'node_modules/mobx/lib/mobx.es6.js'),
},
},
};
还有其他方法来配置Metro,这样我就可以像Webpack一样覆盖mobx
导入了吗?
我用的是0.60.0 RN。
发布于 2020-03-25 20:44:01
解决方案是将browser
部分添加到package.json
"name": "My React Native Project",
"version": "0.0.1",
"browser": {
"mobx": "mobx/lib/mobx.es6.js"
},
这是没有记录的,AFAICT,但这里有提示:
resolverMainFields
类型:Array<string>
指定模块解析器将用于在需要某些包时重定向的package.json文件中的字段。例如,使用“browser”,“main”将使用浏览器字段,如果不存在,则默认为main。
https://facebook.github.io/metro/docs/configuration#resolvermainfields
import mobx from 'mobx' // Yay, es6 build!!!
https://stackoverflow.com/questions/60854736
复制相似问题