从 %appdata% 导入 Webpack答案

【问题标题】：Webpack import from %appdata%从 %appdata% 导入 Webpack
【发布时间】：2020-05-16 11:12:30
【问题描述】：

我有一个电子应用程序需要读取存储在%appdata%（或 macOS 和 linux 的等效文件）中的文件。我正在像这样导入文件

const appPath = app.getPath("appData");
const data = await import(appPath + "/app/file.json");

如果我从源文件运行代码，它可以工作，但是当我尝试将它与 webpack 捆绑时，我收到 Module not found 错误。我知道这是因为 webpack 试图对我的导入进行分析。

那么有没有办法在 webpack 中动态导入文件呢？

提前致谢！

编辑：我的 webpack 配置（没有 babel，因为我使用的是 typescript）

  var path = require("path");
const CopyPlugin = require('copy-webpack-plugin');
var nodeExternals = require('webpack-node-externals');

module.exports = {
    mode: 'production',
    entry: "./src/index.ts",
    externals: [nodeExternals()],
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, 'build')
    },
    node:{
        __dirname:false
    },
    target: "electron-main",
    resolve: {
        alias: {
            ['firebase/app']: path.resolve(__dirname, 'node_modules/firebase/app/dist/index.cjs.js'),
            ['firebase']: path.resolve(__dirname, 'node_modules/firebase/dist/index.node.cjs.js')
        }, extensions: ['.ts', '.js']
    },
    module: {
        noParse: "/public/**/*",
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            // {
            //     test: /\.json$/,
            //     loader: 'json-loader'
            // }
        ],
    },
    plugins: [
        new CopyPlugin([
            { from: './src/public', to: './public' }
        ]),
    ]
 }

【问题讨论】：

分享你的 webpack 和 babel 配置。
你的应用什么时候需要读取这个文件？应用程序何时运行或构建时？
在运行时。我会再次尝试使用 fs，因为很多人告诉我，但我很确定 fs 产生了同样的错误

标签： javascript node.js webpack ecmascript-6 electron

【解决方案1】：

通过查看文档，答案似乎在Module Methods 部分：

import() 中的动态表达式

不能使用完全动态的导入语句，例如import(foo)。因为foo 可能是系统或项目中任何文件的任何路径。

import() 必须至少包含一些关于模块所在位置的信息。 [...]

不清楚您是否需要在构建时或运行时读取它，如果是前者，请确保将文件复制到工作目录（以便该文件捆绑在构建中），如果是后者，则您可以使用fs 模块在运行时获取文件。

【讨论】：

我读到了，但我希望有一些解决方法，因为将文件复制到包中显然不是一种选择
您不使用fs的原因是什么？
好吧，所以由于某种原因，我第一次使用 fs 时它不起作用。但我猜当时问题出在其他地方，我没有注意到。谢谢！

【解决方案2】：

也许你可以尝试动态导入并使用这样的承诺

import(appPath + "/app/file.json").then(data => {
   console.log(data)
});

【讨论】：

我忘记在帖子中添加等待，但我尝试使用动态导入

【解决方案3】：

我猜你不能，但NormalModuleRpelacementPlugin 可能是你的问题的解决方案。您可以在构建时使用它，但它可能取决于环境。

文件路径在代码中是相同的，但是在构建之后它会改变任何你想要的。

https://webpack.js.org/plugins/normal-module-replacement-plugin/

【讨论】：

我查看了它，它仍然需要我知道我要从中导入的路径。由于%appdata% 位于可以有任何名称的用户文件夹中，这将不起作用