Webpack 检查文件是不是存在并在条件下导入

Posted 2023-02-22

【中文标题】Webpack 检查文件是不是存在并在条件下导入

【英文标题】：Webpack check file exist and import in conditionWebpack 检查文件是否存在并在条件下导入

【发布时间】：2017-04-20 20:45:50

【问题描述】：

我在我的 react 项目中使用 webpack。

我想检查“foo/myfile”中的文件，如果该文件存在导入我的组件中，或者从“bar/myfile”加载。 例如：

let myModule;
if(webpackCheckFileExist('foo/myfile.jsx'))
  myModule = require('foo/myfile.jsx');
 else 
  myModule = require('bar/myfile.jsx');

我试试：

if(__webpack_modules__[require.resolveWeak("foo/myfile.jsx")]) 
  // do something when mod1 is available

但如果文件不存在 - 我捕获 webpack 错误

【问题讨论】：

我为此写了一个小的 webpack 加载器：npmjs.com/package/theme-customize-loader.

【参考方案1】：

您可以使用require.context 和正则表达式来匹配当前文件夹中的文件，请参见下面的代码。

const requireCustomFile = require.context(
    './', false, /custom.js$/
)

requireCustomFile.keys().forEach(fileName => 
    requireCustomFile(fileName);
)

【参考方案2】：

首先：如果您不想再创建一个块，请使用该方法。例如：为了在不同的项目中使用不同的preview 文件，并希望在不包含主包块的情况下进行回退。 对于其他情况，创建额外的块是更好的方法。

检查文件是否存在 - 不是最好的主意。 配置文件这样更好，因为：

无需删除文件即可操作结构； 轻松检测变化；

为了包含仅捆绑有用的文件，我写了theme-customize-loader。它是 webpack 加载器。

添加包 $ npm install theme-customize-loader --save-dev

在您的应用中添加配置文件

const data = 
  MyModule: 
    Single : 'App/components/single/Single.jsx',
    Preview: 'my-theme/Preview',
  ,
  OtherModule: 
    Preview: false,
  ,
;

module.exports = data;

值可以是文件路径，也可以是后备文件的 false。

将 webpack 配置添加到规则部分

  enforce: 'pre',
  test   : /\.jsx$/,
  exclude: /node_modules/,
  use    : [ loader: 'theme-customize-loader', options:  config: customizeConfig  ],
,

不要忘记导入配置文件： const customizeConfig = require('./App/configs/customize');

在文件中使用。 重要提示：在一个字符串中

let loadComponent;
/* customize path: "MyModule.Preview" var: "loadComponent" name: "my-chunk-name" origin: "../components/OriginPreview.jsx" */

您可以在这里找到更多信息：https://www.npmjs.com/package/theme-customize-loader

【参考方案3】：

这应该对您有所帮助。它只是使用fs node 包。

var fs = require('fs');

if (fs.existsSync(path)) 
    // Do something

【讨论】：

感谢您的回答。我不使用后端的节点。我需要为生产构建 bundle.js。我想在使用代码之前检查文件

@nDiviD 你不一定要在后端使用节点。但是您的 webpack 在节点上运行，我希望您知道这一点。你可能在你的 webpack 中使用了 path 包。我觉得fs也可以用！如果我错了，请纠正我。

是的，你是对的，webpack 在 node 上运行，但是 webpack 忽略了那部分代码，只是放入了 bundle.js。完成编译后代码尝试检测文件。我只想在 bundle.js 中使用两个文件之一。

至少要提一下你为什么不赞成我的回答。

fs.exists 是 deprecated （显然早在这个答案之前很久）

【参考方案4】：

您的问题的一个潜在解决方案是利用模块解析的工作方式......不需要自定义加载器！

如果您取消扩展名并且有一个名称匹配的文件，则将使用该文件，如果该文件丢失，则它将检查具有匹配名称的文件夹并在其中查找 index.js 文件文件夹。我只为打字稿项目测试过这个，并使用import，但它应该工作相同。 （见：https://webpack.js.org/concepts/module-resolution/#module-paths）

你可以有这样的东西：

some-file.js：

const myModule = require('./foo/myfile');
// ...

foo/myfile/index.ts:（注意下面的..是必需的）

module.exports = require('../bar/myfile.jsx')

现在，如果 foo/myfile.jsx 不存在，那么它将使用从 bar/myfile.jsx 重新导出的 foo/myfile/index.js 文件。

但是，如果foo/myfile.jsx 存在，那么它将使用该文件。问题解决了！