如何在Metro.config.js中为Metro Bundler附加扩展名?

时间:2019-04-02 23:08:22

标签: javascript react-native metro-bundler

我正在尝试捆绑markdown文件,而又不增加太多开销(即,不要将它们手动添加到Xcode和Android Studio中的资产捆绑包中,而不使用第三方依赖)。

我的想法是通过调整require()中的Metro bundler设置,允许metro.config.js包括它们:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false,
            },
        }),
    },
    resolver: {
        assetExts: [`md`] // < include md
    }
};

不幸的是,地铁捆绑器将给定默认值的数组替换为此处设置的值。

我不想明确地重复默认资产扩展名列表,该列表列出了大约20多个文件扩展名,特别是因为我想坚持默认设置。参见:https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js

附加到数组也不起作用。

使用RN 0.59.3。

我想念什么吗?

2 个答案:

答案 0 :(得分:2)

找到有关如何在此处包括默认值的答案:https://stackoverflow.com/a/55118654/844907

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

// get defaults assetExts array
const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts;

module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false,
            },
        }),
    },
    resolver: {
        assetExts: [
            ...defaultAssetExts, // <- array spreading defaults
            'md'
        ]
    }
};

答案 1 :(得分:1)

您可以执行此操作的其他方法是使用与react-native-svg-transformer相同的语法

  1. 使metro.config.js异步
  2. 调用getDefaultConfig
  3. 拔出assetExts键

示例

const { getDefaultConfig } = require('metro-config')

module.exports = (async () => {
    const {
        resolver: { assetExts },
    } = await getDefaultConfig()
    return {
        transformer: {
            getTransformOptions: async () => ({
                transform: {
                    experimentalImportSupport: false,
                    inlineRequires: false,
                },
            }),
        },
        resolver: {
            assetExts: [...assetExts, 'md'],
        },
    }
})()