Я пытаюсь создать библиотеку JS для воспроизведения видео.
Я начинаю с Dailymotion и JWPlayer.
В зависимости от того, что пользователь хочет играть, я бы хотел динамически загружать dailymotion или jwPlayer sdk.
Для Dailymotion я запрашиваю их SDK из CDN, чтобы я мог просто добавить тег сценария во время выполнения, хорошо.
Для 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
Я не понимаю, как мне это исправить, есть ли способ сохранить динамический импорт при перебазировании моей библиотеки?