您如何使webpack真正*实际上*忽略外部因素，并依靠浏览器进行导入？ [英] How do you get webpack to *actually* ignore an external and rely on the browser to import?

问题描述

我试图让webpack忽略导入，以便浏览器使用本机ES6 import语句而不是webpack导入。我试图让ffmpeg.js直接导入，因为它在试图打包时使webpack崩溃，因为文件太大。

I'm trying to get webpack to ignore an import, so that its imported by the browser using a native ES6 import statement, not webpack. I'm trying to get ffmpeg.js to import directly as it crashes webpack when it tries to bundle it, as the files are too large.

在这里跟随答案（ 如何从中排除模块webpack，而不是使用es6 导入），我在本地树中将代码存储为/ffmpeg/ffmpeg-mpeg.js，并验证了我的开发服务器可以以 http：// localhost：8080 / ffmpeg / ffmpeg-webm.js

Following the answer here (How to exclude a module from webpack, and instead import it using es6), I have my code in the local tree as /ffmpeg/ffmpeg-mpeg.js and verified my dev server can access as http://localhost:8080/ffmpeg/ffmpeg-webm.js

然后我通过以下方式导入：

I then import via:

  import ffmpeg from '/ffmpeg/ffmpeg-webm.js';

并将其添加到我的webpack配置的外部部分：

And add that to the externals section of my webpack config:

  externals: {
    '/ffmpeg/ffmpeg-webm.js': 'ffmpeg',
  },

结果是一个看起来像这样的链接

The result is an link that looks like this

webpack:///external "ffmpeg"

包含：

module.exports = ffmpeg;

然后失败，并显示未捕获的错误：找不到模块？ （实际上，错误是在生成的文件中硬编码的）

Which then fails with "Uncaught Error: Cannot find module ?" (In fact that error is hardcoded in the generated file)

因此，这似乎假定存在一个全局ffmpeg选项，然后将该模块映射到该选项，但是我想要

So that seems to assume there is a global ffmpeg option and then maps that module to that, but instead I want it leave the line completely untouched by webpack and leave it to the browser.

这样做的正确方法是什么？在该页面上被否决的排除规则也不起作用。

Whats the correct way to do that? The exclude rule thats downvoted on that page doesn't work either.

推荐答案

您忘记了在页面中包含外部脚本。

You forgot to include the external script in your page.

此外，由于您指出了文件很大，因此建议您将其推迟保存。

Also since you pointed out that your file is very big, I'd recommend to include it defered

因此，您需要添加

<script src="/ffmpeg/ffmpeg-webm.js" defer></script>

到应用程序的头部，然后使用带有回调的导入功能将其导入稍有不同

To the head of your app and you would then import it slightly differently using the import function with a callback

import('/ffmpeg/ffmpeg-webm.js').then(ffmpeg => {
  //Do what you want to do with ffmpeg
});

小注：外部键不必是您的文件，它只是您导入时使用的名称，因此，如果您对路径感到困惑，请重命名该文件

Small note: the externals key does not need to be the path of your file, it's just the name you will use when importing, so rename it if you are getting confused with the path

module.export = {
  //...
  externals: {
    "ffmpeg-webm": "ffmpeg"
  }
}
//Then import
import('ffmpeg-webm').then(ffmpeg => {
  //Do what you want to do with ffmpeg
});

或者，您可以使用

const ffmpeg = __non_webpack_require__('/ffmpeg/ffmpeg-webm.js')

请记住，这会将其转换为仅适用于ES6的常规要求

Just keep in mind that this will transform it as a normal require that only works with ES6

这篇关于您如何使webpack真正*实际上*忽略外部因素，并依靠浏览器进行导入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！