diff --git a/.gitignore b/.gitignore
index 86a93a7..9bc53f8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,5 +4,6 @@ yarn-error.log
package-lock.json
.DS_Store
/lib
+/lazy
/demo
/coverage
diff --git a/README.md b/README.md
index c7eed88..f2cceff 100644
--- a/README.md
+++ b/README.md
@@ -28,20 +28,28 @@ ReactPlayer `v2.0` removes single player imports in favour of lazy loading playe
### Usage
```bash
-npm install react-player --save
-# or
-yarn add react-player
+npm install react-player
```
-```js
-import React, { Component } from 'react'
+```jsx
+import React from 'react'
import ReactPlayer from 'react-player'
-class App extends Component {
- render () {
- return
- }
-}
+const App = () => (
+
+)
+```
+
+If your build system supports `import()` statements, use `react-player/lazy` to lazy load the appropriate player for the `url` you pass in. This will add several `reactPlayer` chunks to your bundle, but reduce your main bundle size.
+
+```jsx
+import React from 'react'
+import ReactPlayer from 'react-player/lazy'
+
+// Only loads the YouTube player
+const App = () => (
+
+)
```
Demo page: [`https://cookpete.com/react-player`](https://cookpete.com/react-player)
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..02b436d
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,28 @@
+const getExcludes = lazy => {
+ if (lazy) {
+ // Disable transforming `import()` statements to enable lazy players
+ return ['@babel/plugin-proposal-dynamic-import']
+ }
+ return []
+}
+
+module.exports = {
+ presets: [
+ [
+ '@babel/preset-env',
+ { exclude: getExcludes(process.env.LAZY) }
+ ],
+ '@babel/preset-react'
+ ],
+ plugins: [
+ 'react-hot-loader/babel',
+ '@babel/plugin-proposal-class-properties'
+ ],
+ env: {
+ test: {
+ plugins: [
+ 'istanbul'
+ ]
+ }
+ }
+}
diff --git a/package.json b/package.json
index ad71b7f..1e9b601 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"main": "lib/ReactPlayer.js",
"typings": "index.d.ts",
"scripts": {
- "clean": "rimraf lib demo coverage",
+ "clean": "rimraf lib lazy demo coverage",
"start": "webpack-dev-server --config webpack/config.babel.js",
"lint": "standard --verbose | snazzy",
"lint:fix": "standard --fix",
@@ -13,12 +13,13 @@
"test:coverage": "cross-env NODE_ENV=test nyc ava",
"test:codecov": "nyc report --reporter=json && codecov -f coverage/coverage-final.json",
"build:lib": "cross-env NODE_ENV=production babel src -d lib --ignore src/demo",
+ "build:lazy": "cross-env NODE_ENV=production LAZY=true babel src -d lazy --ignore src/demo",
"build:demo": "cross-env NODE_ENV=production webpack --config webpack/production.babel.js",
"build:dist": "cross-env NODE_ENV=production webpack --config webpack/dist.babel.js",
"build:standalone": "cross-env NODE_ENV=production webpack --config webpack/standalone.babel.js",
"preversion": "npm run lint && npm run test",
"version": "auto-changelog -p && npm run build:dist && npm run build:standalone && git add CHANGELOG.md dist",
- "prepublishOnly": "npm run build:lib && npm run build:dist",
+ "prepublishOnly": "npm run build:lib && npm run build:lazy && npm run build:dist",
"postpublish": "npm run clean"
},
"repository": {
@@ -102,30 +103,6 @@
"prop-types": "^15.7.2",
"react-fast-compare": "^3.0.1"
},
- "babel": {
- "presets": [
- [
- "@babel/preset-env",
- {
- "exclude": [
- "@babel/plugin-proposal-dynamic-import"
- ]
- }
- ],
- "@babel/preset-react"
- ],
- "plugins": [
- "react-hot-loader/babel",
- "@babel/plugin-proposal-class-properties"
- ],
- "env": {
- "test": {
- "plugins": [
- "istanbul"
- ]
- }
- }
- },
"postcss": {
"plugins": {
"autoprefixer": {},
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..b2691d8
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,3 @@
+import ReactPlayer from './ReactPlayer'
+
+export default ReactPlayer