javascript - Webpack 重新捆绑动态导入
问题描述
我正在尝试制作一个 JS 库来播放视频。我从 Dailymotion 和 JWPlayer 开始。
根据用户想要玩的内容,我想动态加载dailymotion或jwPlayer sdk。
对于 Dailymotion,我从 CDN 请求他们的 SDK,这样我就可以在运行时添加一个脚本标签,很好。
对于 JWPLayer,我拥有所有的 javascript,但我希望它位于单独的块中,所以我使用动态导入。
在我的输出目录中,我有:
- main.bundle.js
- jwplayer.chunk.js
webpack.config.js:
const path = require('path');
const buildConfig = require('./build.config.js');
const srcDir = path.resolve(__dirname, 'src');
module.exports = {
entry: {
CorePlayer: path.resolve(srcDir, 'CorePlayer'),
},
output: {
path: path.resolve(__dirname, buildConfig.outDirectory),
filename: '[name].js',
chunkFilename: 'internal/_[name].js',
libraryTarget: 'commonjs2',
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'@utils': path.resolve(__dirname, 'src/utils'),
'@lib': path.resolve(__dirname, 'lib'),
'~': path.resolve(__dirname, 'src'),
},
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
}
],
},
};
.babelrc:
{
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties"
],
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"loose": true,
"shippedProposals": true
}
]
],
"env": {
"test": {
"presets": ["@babel/preset-env"]
}
}
}
现在我正在尝试将我的库作为另一个项目的模块请求:
import myPlayer from 'my-player';
myPlayer
是由main.bundle.js
该项目的捆绑包导出的并将成为该捆绑包的一部分。
但是当我想使用 jwplayer 显示视频时,我会收到错误 404,找不到 jwplayer.chunk.js
我不知道应该如何解决这个问题,有没有办法在重新捆绑我的库时保留动态导入?
解决方案
推荐阅读
- python - 从 gps 坐标列表中获取点之间的距离
- android - 无法为 armv7-linux-android 目标执行 Rust 链接器
- javascript - 澄清 filter() 函数;这个怎么运作
- php - 正则表达式根据用户名从 href 属性中提取 URL
- angular - 如何防止 ng-idle 在 Angular 的登录页面上观看
- html - 如何在文本溢出省略号点(...)和文本后添加空格
- web - 如何将 Godaddy 上的 CNAME WWW 重置为默认 @ 值
- android - 模拟器:错误:检测到挂起的线程“QEMU1 主循环”。105001 毫秒无响应
- vue.js - Axios 获取具有网络错误和状态码为 200 的 Cors 策略的方法
- amazon-web-services - 我的 EC2 实例是否公开可用有什么关系?