Я пытаюсь реализовать пакет https://video-react.js.org/ в моем проекте.
Инструкции по установке не очень исчерпывающие, поэтому я попробовал что-то подобное с моим входным файлом
'use strict';
import React from 'react';
import ReactDom from 'react-dom';
import { Player, BigPlayButton } from '../vendor/src/video-react';
class PlayerHTML5 extends React.Component {
state = {
poster : this.props.poster,
src : this.props.src
};
render() {
return (
<Player poster={this.state.poster} src={this.state.src}>
<BigPlayButton position="center" />
</Player>
);
}
}
const domContainer = document.querySelector('#preview_video');
const src = domContainer.dataset.src;
const poster = domContainer.dataset.poster;
ReactDom.render(<PlayerHTML5 poster={poster} src={src} />, domContainer);
Я знаю, что код работает, потому что я видел, как он работает.
Перед использованием веб-пакета я использовал symfony Encore, но для моего знания хочу изучить веб-пакет.
Вот мой пакет . json
{
"name": "react-player",
"version": "1.0.0",
"description": "",
"main": ".prettierrc.js",
"scripts": {
"buildPlayer": "./node_modules/.bin/webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
"@babel/plugin-transform-react-jsx": "^7.9.1",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.1",
"babel-loader": "^8.1.0",
"classnames": "^2.2.6",
"css-loader": "^3.4.2",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"redux": "^4.0.5"
}
}
А вот мой webpack.config. js
const path = require('path');
module.exports = {
mode: "development",
entry: './build/playerHTML5.js',
watch: false,
output : {
path : path.resolve('./src'),
filename : 'playerHTML5.js'
},
module : {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env','@babel/preset-react'],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-runtime',
'@babel/plugin-transform-react-jsx',
'@babel/plugin-syntax-object-rest-spread'
]
}
}
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader'
]
}
]
}
}
ERROR in ./vendor/styles/scss/video-react.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./vendor/styles/scss/video-react.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
/var/apache/www/celian_web/02_scripts/02_javascript/react-player/node_modules/css-loader/dist/plugins/postcss-icss-parser.js:34
accumulator[normalizedUrl] = { ...accumulator[normalizedUrl],
^^^
SyntaxError: Unexpected token ...
Вот видео-реакции.s css file
https://github.com/video-react/video-react/blob/master/styles/scss/video-react.scss
По некоторым причинам я не могу понять, у меня есть эта ошибка выше. Я думал, что это javascript оператор распространения, поэтому я добавил @babel/plugin-syntax-object-rest-spread
, чтобы решить проблему, но он также не работал.
Что не так с моей конфигурацией webpack?