Gatsby中gatsby-plugin-exclude无法排除测试与Mock文件求助

你之前用的两个插件都不对路：

• gatsby-plugin-exclude 是用来排除Gatsby生成的页面路径（比如/src/pages下的页面），不让它们生成HTML，不是用来移除源码文件的。
• gatsby-plugin-advanced-sitemap 只是在生成站点地图时排除指定页面，和构建包的内容无关。

要把/src/mocks下的所有文件以及所有.test.js文件从生产构建包中排除，正确的做法是修改Webpack配置，因为Gatsby底层基于Webpack运行。

具体步骤 #

1. 安装null-loader，它会把匹配的文件替换为空内容，从而不被打包进构建：

npm install null-loader --save-dev

2. 在项目根目录的gatsby-node.js文件中添加以下配置（如果没有这个文件就新建一个）：

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  // 只在生产构建阶段生效
  if (stage === 'build-javascript') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            // 匹配所有.test.js/.test.jsx文件，以及/src/mocks下的所有文件
            test: /(\.test\.jsx?$)|(\/src\/mocks\/.*)/,
            use: 'null-loader',
          },
        ],
      },
    })
  }
}

3. 重新执行生产构建：

gatsby build

补充说明 #

如果你的Mock和测试文件没有被生产代码引用，其实Gatsby默认不会把它们打包进生产构建。但如果不小心在生产代码中import了这些文件，上面的配置就能强制阻止它们被打包。

内容的提问来源于stack exchange，提问作者Ashwani Panwar