this.container = ref} className={wrapperClassName} {...resetProps} />;
73 | }
74 | }
75 |
76 | export default DPlayerComponent;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://travis-ci.org/MoePlayer/react-dplayer)
2 | [](https://www.npmjs.com/package/react-dplayer)
3 | [](https://www.npmjs.com/package/react-dplayer)
4 | [](https://github.com/hnsylitao/react-dplayer/blob/master/LICENSE)
5 |
6 | # react-dplayer [demo](https://codesandbox.io/s/react-dplayer-demo-i61n5) [next demo](https://codesandbox.io/s/next-react-dplayer-7frjk)
7 |
8 | # Gitpod
9 |
10 | Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.
11 |
12 | [](https://gitpod.io/#https://github.com/MoePlayer/react-dplayer)
13 |
14 | **React component for Dplayer** based on [DPlayer(V1.26.0)](https://github.com/DIYgod/DPlayer).
15 |
16 | ## Install
17 |
18 | ```bash
19 | npm install react-dplayer -D
20 | ```
21 |
22 | ## Usage
23 |
24 | ### commonjs
25 |
26 | ```js
27 | import DPlayer from "react-dplayer";
28 |
29 | class Example extends Component {
30 | render() {
31 | return (
32 |
37 | )
38 | }
39 | }
40 | ```
41 |
42 | ### browser
43 |
44 | ```html
45 |
46 |
47 |
48 |
49 |
50 |
57 | ```
58 |
59 | The package also includes an in-built example under the `/example` folder. Run the sample application by cloning project and running npm start.
60 |
61 | ## [Dplayer Doc](http://dplayer.js.org/docs/)
62 |
63 | ## Props
64 |
65 | | Name | Type | Default | Description |
66 | | ---- | ---- | ------- | ----------- |
67 | | options | Object | -- | [read doc](http://dplayer.js.org/guide.html#options) |
68 |
69 | ## Events
70 |
71 | > `camel-case rule` example play as onPlay
72 |
73 | | Name | Params | Description |
74 | | ---- | ------ | ----------- |
75 | | allEvent | default | [read doc](http://dplayer.js.org/guide.html#event-binding) |
76 |
77 | ## Development
78 |
79 | - `npm run start`: Run example in development mode
80 | - `npm run compile`: Build react-dplayer（commonjs）
81 | - `npm run dist`: dist react-dplayer (umd)
82 |
83 | ## License
84 |
85 | `react-dplayer` is released under the `MIT license`.
86 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const rootPath = process.cwd();
3 | const srcPath = path.resolve(rootPath, 'src');
4 | const pkg = require('./package.json');
5 | const libraryName = 'ReactDPlayer';
6 | const webpack = require('webpack');
7 | const { merge } = require('webpack-merge');
8 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
9 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
10 |
11 | const baseWebpackConfig = {
12 | output: {
13 | path: path.resolve(rootPath, 'dist'),
14 | filename: '[name].js',
15 | chunkFilename: '[name].js',
16 | library: libraryName,
17 | libraryTarget: 'umd',
18 | },
19 | externals: {
20 | [`react`]: {
21 | root: 'React',
22 | commonjs2: 'react',
23 | commonjs: 'react',
24 | amd: 'react',
25 | },
26 | [`dplayer`]: 'DPlayer',
27 | },
28 | devtool: '#sourcemap',
29 | resolve: {
30 | modules: ['node_modules'],
31 | extensions: ['.js', '.jsx', '.json'],
32 | },
33 | optimization: {
34 | splitChunks: {
35 | cacheGroups: {
36 | styles: {
37 | name: 'styles',
38 | test: /\.css$/,
39 | chunks: 'all',
40 | enforce: true,
41 | },
42 | },
43 | },
44 | },
45 | module: {
46 | rules: [
47 | {
48 | test: /\.(js|jsx)$/,
49 | exclude: [/node_modules/],
50 | use: [
51 | {
52 | loader: 'babel-loader',
53 | options: {
54 | configFile: path.resolve(rootPath, 'babelrc/default/.babelrc'),
55 | },
56 | },
57 | ],
58 | },
59 | {
60 | test: /\.css$/,
61 | use: [MiniCssExtractPlugin.loader, 'css-loader'],
62 | },
63 | ],
64 | },
65 | plugins: [
66 | new MiniCssExtractPlugin({
67 | filename: '[name].css',
68 | }),
69 | new webpack.optimize.OccurrenceOrderPlugin(),
70 | new webpack.NoEmitOnErrorsPlugin(),
71 | new webpack.BannerPlugin(
72 | `${pkg.name} v${pkg.version}
73 |
74 | Copyright 2017-present, MoePlayer, Inc.
75 | All rights reserved.`,
76 | ),
77 | ],
78 | };
79 |
80 | const createWebpackConfig = function (config) {
81 | return merge(baseWebpackConfig, config);
82 | };
83 |
84 | const minWebpackConfig = createWebpackConfig({
85 | mode: 'production',
86 | entry: {
87 | [`${pkg.name}.min`]: path.resolve(srcPath, 'index.js'),
88 | },
89 | optimization: {
90 | minimizer: [
91 | new UglifyJsPlugin({
92 | uglifyOptions: {
93 | warnings: false,
94 | output: {
95 | ascii_only: true,
96 | },
97 | },
98 | sourceMap: true,
99 | }),
100 | ],
101 | },
102 | plugins: [
103 | new webpack.DefinePlugin({
104 | 'process.env.NODE_ENV': JSON.stringify('production'),
105 | }),
106 | ],
107 | });
108 |
109 | const uncompressedWebpackConfig = createWebpackConfig({
110 | mode: 'development',
111 | entry: {
112 | [`${pkg.name}`]: path.resolve(srcPath, 'index.js'),
113 | },
114 | plugins: [
115 | new webpack.DefinePlugin({
116 | 'process.env.NODE_ENV': JSON.stringify('development'),
117 | }),
118 | ],
119 | });
120 |
121 | module.exports = [minWebpackConfig, uncompressedWebpackConfig];
122 |
--------------------------------------------------------------------------------