Question

我在反应项目中使用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
}

但如果文件dosnt存在 - 我抓住webpack错误

Answer 1

这应该对你有所帮助。它只使用fs节点包。

var fs = require('fs');

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

// Or

fs.exists(path, function(exists) {
    if (exists) {
        // Do something
    }
});

Answer 2

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

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

操纵结构而不删除文件;
轻松检测更改;

对于仅包含有用文件的include，我写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;

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

将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

Answer 3

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

sizeBlock

Answer 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 不存在，那么它将使用从 foo/myfile/index.js 重新导出的 bar/myfile.jsx 文件。

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

Webpack检查文件存在并导入条件

4 个答案: