0.0.2 in browser

.gitignore

@@ -57,8 +57,9 @@ typings/
 # dotenv environment variables file
 .env
 
-# lib
+# lib dist
 lib
+dist
 
 #idea
 .idea

.npmignore

@@ -1,2 +1,3 @@
 *
-!lib/*
+!lib/*
+!dist/*

.travis.yml

@@ -11,4 +11,5 @@ notifications:
 install: npm install --dev
 
 script:
-  - npm run compile
+  - npm run compile
+  - npm run dist

README.md

@@ -1,5 +1,4 @@
-[![Build Status](https://travis-ci.org/hnsylitao/react-dplayer.svg?branch=master)](https://travis-ci.org/hnsylitao/react-dplayer)
-[![Version](https://img.shields.io/npm/v/react-dplayer.svg?style=flat)](https://www.npmjs.com/package/react-dplayer)
+[![Build Status](https://travis-ci.org/MoePlayer/react-dplayer.svg?branch=master)](https://travis-ci.org/MoePlayer/react-dplayer)[![Version](https://img.shields.io/npm/v/react-dplayer.svg?style=flat)](https://www.npmjs.com/package/react-dplayer)
 [![NPM](https://img.shields.io/npm/dt/react-dplayer.svg?style=flat)](https://www.npmjs.com/package/react-dplayer)
 [![LICENSE](https://img.shields.io/badge/license-MIT-green.svg?style=flat)](https://github.com/hnsylitao/react-dplayer/blob/master/LICENSE)
 
@@ -15,6 +14,7 @@ npm install react-dplayer -save
 
 ## Usage
 
+### commonjs
 ```js
 import Dplayer from "react-dplayer";
 
@@ -25,12 +25,22 @@ class Example extends Component {
 
     render() {
         return (
-            <Dplayer />
+            <DPlayer video={{
+                    url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
+                   }}/>
         )
     }
 }
 ```
 
+### browser
+```html
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/DPlayer.min.css">
+<script src="https://unpkg.com/[email protected]/dist/DPlayer.min.js" />
+<script src="https://unpkg.com/[email protected]/dist/react.min.js" />
+<script src="https://unpkg.com/[email protected]/dist/react-dplayer.min.js" />
+```
+
 The package also includes an in-built example under the `/example` folder. Run the sample application by cloning project and running npm start.
 
 ## [Dplayer Doc](http://dplayer.js.org/docs/)
@@ -67,7 +77,8 @@ The package also includes an in-built example under the `/example` folder. Run t
 ## Development
 
 - `npm run start`: Run example in development mode
-- `npm run compile`: Build react-dplayer
+- `npm run compile`: Build react-dplayer（commonjs）
+- `npm run dist`: dist react-dplayer (umd)
 
 ## License
 

package.json

@@ -1,13 +1,14 @@
 {
   "name": "react-dplayer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "dplayer",
   "main": "lib/index.js",
   "scripts": {
     "dev-server": "webpack-dev-server --config ./example/example.config",
-    "start": "npm run compile; npm run devServer",
+    "start": "npm run compile; npm run dev-server",
     "prepublish": "babel ./src --out-dir ./lib",
-    "compile": "rimraf lib/* && npm run prepublish"
+    "compile": "rimraf lib/* && npm run prepublish",
+    "dist": "rimraf dist/* && atool-build --devtool=#sourcemap"
   },
   "repository": {
     "type": "git",
@@ -29,13 +30,15 @@
     "prop-types": "^15.5.10"
   },
   "devDependencies": {
+    "atool-build": "^1.0.2",
     "babel-cli": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "create-react-class": "^15.6.0",
     "css-loader": "^0.28.5",
+    "deep-assign": "^2.0.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "html-webpack-plugin": "^2.30.1",
     "react": "^15.6.1",

webpack.config.js

@@ -0,0 +1,60 @@
+const path = require('path')
+  , deepAssign = require('deep-assign')
+  , rootPath = path.resolve(__dirname)
+  , srcPath = path.resolve(rootPath, 'src')
+  , pkg = require('./package.json')
+  , libraryName = (function (str) {
+  return str.split("-").map(function (c, i) {
+    return i > 0 ? (c.charAt(0).toUpperCase() + c.substring(1)) : c;
+  }).join('');
+})(pkg.name)
+  , webpack = require('atool-build/lib/webpack');
+
+module.exports = function (webpackConfig) {
+  webpackConfig.entry = {
+    [`${pkg.name}.min`]: path.resolve(srcPath, 'index.js')
+  }
+  webpackConfig.externals = {
+    [`react`]: {
+      root: 'React',
+      commonjs2: 'react',
+      commonjs: 'react',
+      amd: 'react',
+    },
+    [`dplayer`]: "DPlayer",
+    [`dplayer/dist/DPlayer.min.css`]: "null",
+  };
+
+  /**
+   * remove commonjs
+   */
+  webpackConfig.plugins = webpackConfig.plugins.filter((plugin) => {
+    const ret = !(plugin instanceof webpack.optimize.CommonsChunkPlugin);
+    return ret;
+  });
+  webpackConfig.output.library = libraryName;
+  webpackConfig.output.libraryTarget = 'umd';
+  webpackConfig.plugins.push(new webpack.BannerPlugin(
+    `${ pkg.name} v${pkg.version}
+
+Copyright 2017-present, MoePlayer, Inc.
+All rights reserved.`
+  ));
+  let uncompressedWebpackConfig = deepAssign({}, webpackConfig);
+  uncompressedWebpackConfig.entry = {
+    [`${pkg.name}`]: path.resolve(srcPath, 'index.js')
+  }
+  uncompressedWebpackConfig.plugins = webpackConfig.plugins.filter((plugin) => {
+    const ret = !(plugin instanceof webpack.optimize.UglifyJsPlugin);
+    return ret;
+  });
+  uncompressedWebpackConfig.plugins = uncompressedWebpackConfig.plugins.filter((plugin) => {
+    const ret = !(plugin instanceof webpack.DefinePlugin);
+    return ret;
+  });
+  uncompressedWebpackConfig.plugins.push(new webpack.DefinePlugin({
+    'process.env.NODE_ENV': JSON.stringify('development'),
+  }));
+
+  return [webpackConfig, uncompressedWebpackConfig];
+}