使用地铁配置多个变压器/解析器 [英] Configure multiple transformers/resolvers using metro
问题描述
我正在尝试使用 Metro 为我的 React Native 项目添加多个解析器和转换器,如何将它们组合到我的 Metro.config.js 文件中?
I'm trying to add multiple resolvers and transformers using metro for my react native project, how do I combine them in my metro.config.js file?
背景:我想让 sass 转换器和 svg 转换器都能工作.
Background: I want to get both a sass transformer to work as well as a svg transformer.
我已经分别尝试了这些配置,这似乎有效,但我对如何组合它们使它们同时工作感到困惑.我假设它们需要在同一个 module.exports 中,因为当它们都在同一个文件中时,我的 svg 会出错
I've tried the configurations separately and that seems to work, but I'm confused to how I combine them so they both work at the same time. I'm assuming they need to be in the same module.exports, because when they both are in the same file I get errors for my svg's
这些是我正在尝试组合的配置:
These are the configs I'm trying to combine:
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 时,出现以下错误:
When I try to run it with the code as above, that is two module exports in the metro.config.js, it seems that only the sass transformer works, when I try to draw an svg I get the following error:
Invariant violation: Element type is invalid: Expected a string (for built-in components) or a class/function (for composite components) but got number.
推荐答案
我通过创建自定义转换器解决了这个问题,如下所示:
I solved it by creating a custom transformer as follows:
customTransformer.js :
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 中:
And in my 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"]
}
};
})();
不知道这是否是最好的方法,但它似乎有效
No idea if this is the best way, but it seems to work
这篇关于使用地铁配置多个变压器/解析器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!