在 webpack 包中导入外部静态文件

Question

How can I import an external file ( config.js ) from within a webpack bundle?如何从 webpack 包中导入外部文件 ( config.js )？

I have the following file-structure for local dev:我有以下本地开发的文件结构：

/dist/
    /index.html
    /plugin.js
/src/
    /index.ts
/config.js        # This config is only for local dev, will be different in prod
/ ...

The plugin.js will be moved to and executed by a third-party website. plugin.js将被移动到第三方网站并由第三方网站执行。 I want to import the config.js (which will in production be provided by the third-party website) inside my plugin.js .我想在我的plugin.js中导入config.js （将在生产中由第三方网站提供）。

I import the config.js in index.ts like this:我像这样在index.ts中导入config.js ：

import config from "../config.js";

I have managed to exclude the config.js from plugin.js by specifing it in the externals -field in the webpack.config.js which is working so far:我已经设法从plugin.js中排除config.js ，方法是在webpack.config.js的externals字段中指定它，该字段目前有效：

module.exports = {
    ...
    externals: [
        "../config.js"    
    ]

}

When I open index.html however, the import statement from ../config.js is not getting an error but the config -object file is undefined .但是，当我打开index.html时，来自../config.js的import语句没有出错，但是config -object 文件是undefined 。

The file structure of the third-party server in prod looks like this: prod中第三方服务器的文件结构如下：

/ ... /
    /plugins/
        /other-plugin/...  # A bunch of other plugins. Each has its own folder in plugins
        /my-plugin/
            plugin.js      # This is my plugin
        /config.js         # This is the global config file of the server for all plugins

index.ts :索引.ts ：

import config from "../config.js";
console.log(config);

config.js :配置.js ：

module.exports = {
   foo: "bar"
}

Answer 1

The externals implies that whatever that was exported by config.js file would be available at runtime. externals意味着config.js文件导出的任何内容都将在运行时可用。 So for browser, that means, you have probably already injected it via script tag or for Node.js, it is already imported via globalThis or some equivalent.因此，对于浏览器，这意味着您可能已经通过script标签或 Node.js 注入了它，它已经通过globalThis或其他等效项导入。 Your import line - import config from "../config.js";您的导入行 - import config from "../config.js"; is simply gone when the code is bundled.捆绑代码时就消失了。 The external doesn't mean that it would re-import config.js when the code is being run Additionally, the general practice is to use external object configuration instead of array configuration like: external并不意味着它会在代码运行时重新导入config.js另外，一般的做法是使用外部对象配置而不是数组配置，例如：

module.exports = {
  // ...
  externals: {
    "../config.js": "AppConfig"
  }
};

This tells Webpack that whatever was exported by config.js file should be available as AppConfig object at runtime.这告诉 Webpack config.js文件导出的任何内容都应该在运行时作为AppConfig对象可用。 Using array syntax is meant for code with side-effects.使用数组语法适用于有副作用的代码。

Now coming back to possible solution.现在回到可能的解决方案。 The recommended option is to use environment variables for passing the environment specific values.推荐的选项是使用环境变量来传递环境特定的值。 Assuming your plugin is a library, when it is being consumed and getting bundled as part of application via Webpack, you can make use of DefinePlugin to inject these values into your code.假设您的插件是一个库，当它被使用并通过 Webpack 作为应用程序的一部分捆绑时，您可以使用DefinePlugin将这些值注入您的代码中。 You can then access those in your code as process.env.foo .然后，您可以以process.env.foo的形式访问代码中的那些。 You should not import config.js in your code anywhere.您不应该在任何地方的代码中导入config.js 。

The second option is to use externals with object configuration as shown above.第二个选项是使用外部对象配置，如上所示。 Change your config.js file to UMD or equivalent:将config.js文件更改为 UMD 或等效文件：

// config.js file

const config = {
   foo: "bar"
};

// Make it available globally
window.AppConfig = config;

// Since `module` is not available in browser.
if (module && module.exports) {
  module.exports = config;
}

And finally, import your config.js in index.html file before your bundled script gets loaded.最后，在加载捆绑脚本之前将config.js导入index.html文件。

<head>
  <script src="/path/to/config.js>"></script>
  <script src="/path/to/bundle.js>"></script>
</head>

在 webpack 包中导入外部静态文件

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-06-09 12:37:52

在 webpack 包中导入外部静态文件

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-06-09 12:37:52

解决方案1
1 已采纳 2022-06-09 12:37:52