Question

我正在构建一个npm软件包，它将从项目根目录接收自定义规则-类似于更漂亮的在项目根目录中寻找.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文件，我可以做些类似的事情吗？

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会将其与您的应用捆绑在一起。

Answer 2

我确实需要加载一个外部json文件，实际上是由部署过程创建的settings.json文件，该文件位于webpack生成的min.js文件的旁边。我尝试了外部工具，路径解析器，所有我能想象的东西，但没有任何效果。

因此，最后我最终做了我本来不想做的事情，使用fetch（相当于XMLHttpRequest的打字稿）恢复了文件。我对此解决方案的主要担心是正确地确定了网址。如果您所处的环境可能涉及多个级别的代理和子路径，则可能会出现问题。

我的最终解决方案是在所有根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？好吧，基本上，我想确保无论客户端的路径如何，都从正确的源加载文件。我们使用代理，通常会有一个我不了解的子路径。

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

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

我对这个解决方案还可以，因为最后从后端恢复的任何文件总是涉及获取操作，因此这没有额外的成本。而且我确定我使用的位置正确，因为我使用的是script标签产生的参考。

希望这对某人有帮助。

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

2 个答案: