你如何让webpack * 实际上 * 忽略外部并依赖浏览器导入?

bjg7j2ky  于 11个月前  发布在  Webpack
关注(0)|答案(2)|浏览(104)

我试图让webpack忽略一个导入,这样它就可以通过浏览器使用原生的ES6 import语句导入,而不是webpack。我试图让ffmpeg.js直接导入,因为当它试图捆绑webpack时会崩溃,因为文件太大了。
根据这里的答案(How to exclude a module from webpack, and instead import it using es6),我在本地树中的代码为/ffmpeg/ffmpeg-mpeg. js,并验证了我的开发服务器可以作为http://localhost:8080/ffmpeg/ffmpeg-webm.js访问
然后通过以下方式导入:

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

字符串
并将其添加到我的webpack配置的外部部分:

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


结果是这样的链接

webpack:///external "ffmpeg"


包含:

module.exports = ffmpeg;


然后失败并返回“Uncaught Error:Cannot find module?”(实际上,该错误已硬编码在生成的文件中)
所以这似乎是假设有一个全局ffmpeg选项,然后将该模块Map到该选项,但相反,我希望它完全不受webpack的影响,并将其留给浏览器。
正确的方法是什么?在那个页面上被否决的排除规则也不起作用。

n9vozmp4

n9vozmp41#

编辑:

你可以使用这个:

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

字符串
这将阻止webpack编译导入(因此它将是常规的ES6导入)

原始答案:

您忘记在页面中包含外部脚本。
此外,由于您指出,您的文件是非常大的,我建议将其包括在
所以你需要加上

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


添加到应用程序的头部,然后使用带有回调的导入函数导入它,

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


小提示:externals键不需要是文件的路径,它只是导入时使用的名称,因此,如果与路径混淆,请重命名它

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


或者,对于node js,您可以使用

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


请记住,这将把它转换为仅适用于node js的普通require

zf2sa74q

zf2sa74q2#

官方的方法是使用Magic Comment:

import(/* webpackIgnore: true */ 'ignored-module.js');

字符串
这告诉webpack将import()语句按原样复制到输出包。
你可以使用更多神奇的注解,比如启用延迟加载(这可能会解决你的问题,同时仍然允许你使用webpack的导入)。

**如果使用TypeScript,请注意:**您的tsconfig.json可能会抑制webpackIgnore。这里有两种情况需要注意:

//Needs to be false or the TS compiler will remove your comments BEFORE webpack sees them
"removeComments": false,

/*
Need to be ES2020 or later(ish).
The default is ES3, which is old enough that webpack takes things into its own hands
and overhauls imports() even if you tell it not to.
*/
"target": "ES2020",
"module": "ES2020",

相关问题