javascript - 使用 Metro 配置多个变压器/解析器
问题描述
我正在尝试使用 Metro 为我的 react 本机项目添加多个解析器和转换器,如何将它们组合到我的 metro.config.js 文件中?
背景:我想让一个 sass 变压器和一个 svg 变压器都能工作。
我已经分别尝试了这些配置,这似乎可行,但我对如何组合它们感到困惑,因此它们都可以同时工作。我假设它们需要在同一个 module.exports 中,因为当它们都在同一个文件中时,我的 svg 会出现错误
这些是我试图结合的配置:
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
})();
module.exports = (async () => {
const {
resolver: { sourceExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve("react-native-sass-transformer")
},
resolver: {
sourceExts: [...sourceExts, "scss", "sass"]
}
};
})();
当我尝试使用上面的代码运行它时,即 metro.config.js 中的两个模块导出,似乎只有 sass 转换器工作,当我尝试绘制 svg 时,出现以下错误:
Invariant violation: Element type is invalid: Expected a string (for built-in components) or a class/function (for composite components) but got number.
解决方案
我通过创建一个自定义变压器解决了这个问题,如下所示:
customTransformer.js:
// For React Native version 0.59 or later
var upstreamTransformer = require("metro-react-native-babel-transformer");
var sassTransformer = require("react-native-sass-transformer");
var svgTransformer = require("react-native-svg-transformer");
module.exports.transform = function({ src, filename, options }) {
if (filename.endsWith(".scss") || filename.endsWith(".sass")) {
return sassTransformer.transform({ src, filename, options });
} else if (filename.endsWith(".svg")) {
return svgTransformer.transform({ src, filename, options });
} else {
return upstreamTransformer.transform({ src, filename, options });
}
};
在我的 metro.config.js 中:
const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve("./customTransformer.js")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg" && ext!=="scss"),
sourceExts: [...sourceExts, "svg", "scss", "sass"]
}
};
})();
不知道这是否是最好的方法,但它似乎有效
推荐阅读
- python - 用 JSON 中的字符串列表替换单词中的多个相等字符串
- python - 将变量和值传递给函数(通配符?)
- memory - Y86-64 ISA 中存储的条件标志在哪里?
- loops - 在这种情况下如何循环数组?
- angular - 查询参数更改后 canActivate 不触发
- javascript - Angular 组件之间的数据共享
- mysql - SQL for WP 删除具有多个元键和评论的用户
- java - 泽西 MessageBodyProviderNotFoundException
- java - 如何检测丢失的 MySQL 服务器但仍允许长时间运行的查询
- java - 尝试读取 txt 文件并将它们转换为具有不同原语的对象