如何使用webpack从项目根目录导入外部文件？

Question

我正在构建一个npm包，该包将从项目根目录中获取自定义规则 - 类似于prettier在项目根目录中查找.prettierrc的方式。

在我的包中，我使用webpack进行编译。我的应用程序使用react，我将其外部引入，以便在运行时检索该包，而不是在构建时打包它。

webpack.config.js

    module.exports = {
  entry: "./src/index.js",
  output: {...},
  module: {...},
  resolve: {
    modules: [path.resolve("./src"), path.resolve("./node_modules")],
    alias: {
      react: path.resolve(__dirname, "./node_modules/react"),
      "react-dom": path.resolve(__dirname, "./node_modules/react-dom")
    }
  },
  externals: {
    react: {
      commonjs: "react",
      commonjs2: "react",
      amd: "React",
      root: "React"
    },

    "react-dom": {
      commonjs: "react-dom",
      commonjs2: "react-dom",
      amd: "ReactDOM",
      root: "ReactDOM"
    }
  }
};

在这里的externals，您可以看到我正在从构建中排除react和react-dom。

现在，我需要一种方法来从项目根目录导入常规的settings.js文件，而不是从node_modules导入库。Webpack有这个功能吗？

到目前为止，我已经尝试使用externals进行如下导入：

externals: {
    react: {...},
    "react-dom": {...},
    "settings": { commonjs: "settings.js" }
  }

我知道这样做是不对的，但我是否可以做类似的事情以便在运行时从项目目录中导入外部.js文件？

- Truitt7

Answer 1

我建议您打包而不是尝试在运行时导入内容。Webpack 是一个打包工具。当您试图绕过它的设计时，事情会变得混乱。

是的，您可以将根目录之外的文件导入到您的捆绑包中。这是我其中一个应用程序中使用外部代码的示例。

{
    test: /\.js?$/,
    include: [
      path.resolve(__dirname),
      path.resolve(__dirname, "../Public/js/src/common")
    ],
    exclude: /node_modules/,
    loader: "babel-loader"
  }

我也创建了一个别名。

      common: path.resolve(__dirname, "../Public/js/src/common"),

当你导入这个文件时，Webpack会将其与你的应用程序一起打包。

- Chase

Answer 2

我真的需要加载一个外部的json文件，实际上是由我的部署过程创建的settings.json文件，它位于由webpack生成的min.js文件旁边。我尝试了externals、路径解析器和我能想到的一切，但都没有成功。

最终，我最终采取了我最初不想做的事情，使用fetch（typescript中的XMLHttpRequest等效）恢复文件。我对这个解决方案的主要担忧是正确地确定url。如果您在可能涉及多级代理和子路径的环境中工作，这可能是一个问题。

我的最终解决方案是在所有根html文件中包含指向该文件的脚本，如下所示（我有多个）：

<script id="very_unique_id" src="settings.json" type="application/json"></script

然后从我的 JavaScript 中加载该资源并恢复路径：

let element = document.getElementById(ENVIRONMENT_SETTINGS_SCRIPT_ID);
let src = element.src;

let response = await fetch(src);
let settings = await response.json();

那为什么要使用 script 元素而不是直接构建 URL 呢？基本上，我想确保从正确的源加载文件，无论客户端路径如何。我们使用代理，通常会涉及一个子路径，我从 JavaScript 中不知道。

最后，在我的 webpack config.js 文件中，在插件和其他内容之后，我添加了一个外部条目以防止打包时出现错误：

module.exports = {
    plugins: {
    ...
    },
    externals: [
        'settings.json'
    ]
}

我对这个解决方案感到满意，因为最终从后端恢复的任何文件都需要进行获取(fetch)，所以这不会产生额外费用。而且，我确信使用的是正确的位置，因为我正在使用脚本标记(script tag)生成的引用。

希望这可以帮助某些人。

- jcvalverde