build: add CJS & ESM build (#23)

* build: add CJS & ESM build

* docs(griffith-standalone): update readme

* chore: fix eslint path

.gitignore

@@ -1,11 +1,9 @@
 node_modules
 /coverage
 
-bin
-
 dist
 cjs
-es
+esm
 
 # Files
 package-lock.json

babel.config.js

@@ -1,10 +1,8 @@
-module.exports = api => {
-  const config =
-    api.env() === 'cjs'
-      ? {plugins: ['@babel/plugin-transform-modules-commonjs']}
-      : {presets: ['@zhihu/babel-preset/library']}
-  return {
-    babelrcRoots: ['.', './packages/*'],
-    ...config,
-  }
+module.exports = {
+  babelrcRoots: ['.', './packages/*'],
+  presets: [
+    ['@babel/preset-env', {targets: {node: '8.10'}}],
+    ['@babel/preset-react'],
+  ],
+  plugins: ['@babel/plugin-proposal-class-properties'],
 }

example/package.json

@@ -16,5 +16,13 @@
     "react-dom": "16.4.2",
     "react-hot-loader": "^4.3.12",
     "whatwg-fetch": "^3.0.0"
+  },
+  "devDependencies": {
+    "@zhihu/babel-preset": "^1.7.0",
+    "babel-loader": "^8.0.4",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.26.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
   }
 }

example/webpack.config.js

@@ -21,23 +21,15 @@ module.exports = env => {
       proxy: {
         '/mp4': {
           target: 'https://zhstatic.zhihu.com/cfe/griffith/',
-          pathRewrite: {'^/mp4' : ''},
+          pathRewrite: {'^/mp4': ''},
           changeOrigin: true,
           secure: false,
         },
-      }
+      },
     },
 
     devtool: 'cheap-module-eval-source-map',
 
-    resolve: {
-      alias: {
-        griffith: 'griffith/src',
-        'griffith-mp4': 'griffith-mp4/src',
-        'griffith-hls': 'griffith-hls/src',
-      },
-    },
-
     module: {
       rules: [
         {

jest.config.js

@@ -1,6 +1,4 @@
 module.exports = {
-  coverageReporters: ['html', 'cobertura', 'lcov'],
-  rootDir: process.cwd(),
   roots: ['<rootDir>/packages'],
   collectCoverageFrom: ['packages/**/src/**/*.js'],
   coveragePathIgnorePatterns: [
@@ -17,10 +15,6 @@ module.exports = {
     '<rootDir>/packages/[^/]+?/(?!src/)',
     '[^/]+?/__mocks__',
   ],
-  transform: {
-    '\\.js$': '@zhihu/babel-preset/jest',
-  },
-  transformIgnorePatterns: ['/node_modules/@babel/runtime/'],
   setupFiles: ['./jest.setup.js'],
   snapshotSerializers: ['enzyme-to-json/serializer'],
 }

package.json

@@ -31,25 +31,24 @@
   ],
   "scripts": {
     "format": "prettier \"packages/**/*.{js,json,md}\" \"*.{js,json,md}\"",
-    "lint": "eslint \"packages/**/*.js\" \"*.js\"",
+    "lint": "eslint 'packages/*/src/**/*.js' '*.js'",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch --notify",
-    "clean": "lerna run clean",
-    "build:es": "lerna run build:es --parallel --ignore example --ignore griffith-standalone",
-    "build:cjs": "lerna run build:cjs --parallel --ignore example --ignore griffith-standalone",
-    "build:standalone": "yarn workspace griffith-standalone run build",
-    "build": "yarn run clean && yarn run build:es && yarn run build:cjs && yarn run build:standalone",
+    "build:lib": "lerna run build --parallel --ignore example --ignore griffith-standalone",
+    "build:standalone": "lerna run --scope griffith-standalone build",
+    "build": "yarn build:lib && yarn build:standalone",
     "start": "yarn workspace example run start"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.5",
     "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/preset-env": "^7.4.2",
+    "@babel/preset-react": "^7.0.0",
     "@commitlint/config-conventional": "^7.3.1",
-    "@zhihu/babel-preset": "^1.6.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.1.0",
-    "babel-loader": "^8.0.4",
     "commitlint": "^7.4.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.10.0",
@@ -60,15 +59,14 @@
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-react-hooks": "^1.0.2",
-    "html-webpack-plugin": "^3.2.0",
     "husky": "^1.3.1",
     "jest": "^24.1.0",
     "lerna": "^3.4.3",
     "lint-staged": "^8.1.0",
     "prettier": "^1.16.4",
-    "webpack": "^4.26.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10"
+    "rollup": "^1.7.2",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-node-resolve": "^4.0.1"
   },
   "husky": {
     "hooks": {

packages/griffith-hls/package.json

@@ -6,15 +6,17 @@
   "license": "MIT",
   "files": [
     "cjs",
-    "es",
+    "esm",
     "src"
   ],
-  "main": "es/index.js",
-  "module": "es/index.js",
+  "source": "src/index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "sideEffects": false,
   "scripts": {
-    "clean": "rm -rf es cjs",
-    "build:es": "NODE_ENV=production babel src --root-mode upward -d es --ignore 'src/**/*.spec.js','src/**/__tests__'",
-    "build:cjs": "BABEL_ENV=cjs NODE_ENV=production babel es --root-mode upward -d cjs"
+    "prepare": "npm run build",
+    "prebuild": "rm -rf esm cjs",
+    "build": "rollup -c ../../rollup.config.js"
   },
   "peerDependencies": {
     "react": ">=16.3.0 <17.0.0",

packages/griffith-message/package.json

@@ -5,12 +5,18 @@
   "homepage": "https://github.com/zhihu/griffith/tree/master/packages/griffith-message",
   "license": "MIT",
   "files": [
-    "src",
-    "index.js",
+    "cjs",
+    "esm",
     "index.d.ts"
   ],
-  "main": "index.js",
-  "module": "index.js",
+  "source": "src/index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
   "types": "index.d.ts",
-  "sideEffects": false
+  "sideEffects": false,
+  "scripts": {
+    "prepare": "npm run build",
+    "prebuild": "rm -rf esm cjs",
+    "build": "rollup -c ../../rollup.config.js"
+  }
 }

packages/griffith-message/src/index.js

@@ -0,0 +1,4 @@
+import * as EVENTS from './constants/events'
+import * as ACTIONS from './constants/actions'
+import createMessageHelper from './createMessageHelper'
+export {EVENTS, ACTIONS, createMessageHelper}

packages/griffith-mp4/package.json

@@ -6,16 +6,16 @@
   "license": "MIT",
   "files": [
     "cjs",
-    "es",
-    "src",
-    "index.js"
+    "esm"
   ],
-  "main": "es/index.js",
-  "module": "es/index.js",
+  "source": "src/index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "sideEffects": false,
   "scripts": {
-    "clean": "rm -rf es cjs",
-    "build:es": "NODE_ENV=production babel src --root-mode upward -d es --ignore 'src/**/*.spec.js','src/**/__tests__'",
-    "build:cjs": "BABEL_ENV=cjs NODE_ENV=production babel es --root-mode upward -d cjs"
+    "prepare": "npm run build",
+    "prebuild": "rm -rf esm cjs",
+    "build": "rollup -c ../../rollup.config.js"
   },
   "devDependencies": {
     "read-chunk": "^3.0.0"

packages/griffith-standalone/README-zh_CN.md

@@ -6,12 +6,15 @@
 
 ```html
 <div id="player"></div>
-<script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js" />
+<script
+  crossorigin
+  src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"
+></script>
 <script>
   const target = document.getElementById('player')
 
   // 创建播放器
-  const player = Griffith.createPlayer(element, options)
+  const player = Griffith.createPlayer(element)
 
   // 载入视频
   player.render(props)
@@ -21,4 +24,4 @@
 </script>
 ```
 
-options 和 props 的定义请看 [Griffith 的文档](../packages/griffith#readme)。
+`props` 的定义请看 [Griffith 的文档](../packages/griffith#readme)。

packages/griffith-standalone/README.md

@@ -6,12 +6,15 @@ Griffith bundled with React, React DOM and other dependencies. You can use it by
 
 ```html
 <div id="player"></div>
-<script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js" />
+<script
+  crossorigin
+  src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"
+></script>
 <script>
   const target = document.getElementById('player')
 
   // create player instance
-  const player = Griffith.createPlayer(element, options)
+  const player = Griffith.createPlayer(element)
 
   // load video
   player.render(props)
@@ -21,4 +24,4 @@ Griffith bundled with React, React DOM and other dependencies. You can use it by
 </script>
 ```
 
-Read [Griffith docs](../packages/griffith#readme) to know about `options` and `props`.
+Read [Griffith docs](../packages/griffith#readme) to know about `props`.

packages/griffith-standalone/package.json

@@ -7,15 +7,18 @@
   "files": [
     "dist/"
   ],
+  "source": "src/index.js",
   "main": "dist/index.umd.min.js",
   "scripts": {
-    "build": "NODE_ENV=production webpack"
+    "prepare": "npm run build",
+    "prebuild": "rm -rf dist",
+    "build": "webpack -p"
   },
-  "dependencies": {
-    "@babel/runtime": "^7.1.5",
+  "devDependencies": {
     "griffith": "^1.1.4",
-    "hls.js": "0.7.11",
     "react": "16.4.2",
-    "react-dom": "16.4.2"
+    "react-dom": "16.4.2",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0"
   }
 }

packages/griffith-standalone/webpack.config.js

@@ -12,26 +12,10 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
-        oneOf: [
-          {
-            exclude: /node_modules/,
-            loader: 'babel-loader',
-            options: {
-              presets: ['@zhihu/babel-preset/app'],
-              cacheDirectory: true,
-            },
-          },
-          {
-            exclude: /@babel\/runtime/,
-            loader: 'babel-loader',
-            options: {
-              cacheDirectory: true,
-              configFile: false,
-              presets: ['@zhihu/babel-preset/dependencies'],
-              compact: false,
-            },
-          },
-        ],
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env', '@babel/preset-react'],
+        },
       },
     ],
   },

packages/griffith-utils/package.json

@@ -5,9 +5,16 @@
   "homepage": "https://github.com/zhihu/griffith/tree/master/packages/griffith-utils",
   "license": "MIT",
   "files": [
-    "src"
+    "cjs",
+    "esm"
   ],
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "sideEffects": false
+  "source": "src/index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "sideEffects": false,
+  "scripts": {
+    "prepare": "npm run build",
+    "prebuild": "rm -rf esm cjs",
+    "build": "rollup -c ../../rollup.config.js"
+  }
 }

packages/griffith/package.json

@@ -6,23 +6,24 @@
   "license": "MIT",
   "files": [
     "cjs",
-    "es/",
+    "esm",
     "index.d.ts"
   ],
-  "main": "es/index.js",
-  "module": "es/index.js",
+  "source": "src/index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "sideEffects": false,
   "types": "index.d.ts",
   "scripts": {
-    "clean": "rm -rf es cjs",
-    "build:es": "NODE_ENV=production babel src --root-mode upward -d es --ignore 'src/**/*.spec.js','src/**/__tests__'",
-    "build:cjs": "BABEL_ENV=cjs NODE_ENV=production babel es --root-mode upward -d cjs"
+    "prepare": "npm run build",
+    "prebuild": "rm -rf esm cjs",
+    "build": "rollup -c ../../rollup.config.js"
   },
   "peerDependencies": {
     "react": ">=16.3.0 <17.0.0",
     "react-dom": ">=16.3.0 <17.0.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.1.5",
     "aphrodite": "2.2.3",
     "element-resize-event": "^3.0.3",
     "eventemitter3": "^3.1.0",
@@ -37,6 +38,5 @@
   },
   "devDependencies": {
     "jest-localstorage-mock": "^2.3.0"
-  },
-  "sideEffects": false
+  }
 }