feat: use pure ESM format (zhihu#167)

removed `__WITHOUT_HLSJS__` and `__WITHOUT_MP4__`
zmccc · May 20, 2021 · e54d061 · e54d061
1 parent 3330f7a
commit e54d061
Show file tree

Hide file tree

Showing 19 changed files with 1,420 additions and 863 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -5,8 +5,8 @@ node_js:
 
 script:
   - yarn run format
-  - yarn run lint
   - yarn run build
+  - yarn run lint
   - yarn run test:coverage
 
 after_success:

diff --git a/README-ja.md b/README-ja.md
@@ -95,20 +95,29 @@ Griffith は [Yarn workspace](https://yarnpkg.com/lang/en/docs/workspaces/) と
 
 ## カスタムビルド
 
-webpack のようなビルドツールはデフォルトで `griffith-mp4` と `packages/griffith-hls` を含みます。ビルド時に環境値を設定して、プラグインを除外することで、バンドルを小さくすることができます。
+webpack のようなビルドツールはデフォルトで `griffith-mp4` と `griffith-hls` を含みます。ビルド時にエイリアスを挿入することでプラグインを削除できるため、パッケージサイズを縮小できます。
 
-webpack を使いる場合, [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) が使えます。
+webpack を使いる場合, [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealias) が使えます。
 
 ```javascript
-const {DefinePlugin} = require('webpack')
+// webpack v5+
+module.exports = {
+  resolve: {
+    alias: {
+      'griffith-hls': false,
+      'griffith-mp4': false,
+    },
+  },
+}
 
+// webpack v4
 module.exports = {
-  plugins: [
-    new DefinePlugin({
-      __WITHOUT_HLSJS__: JSON.stringify(true), // griffith-hls を抜く
-      __WITHOUT_MP4__: JSON.stringify(true), // griffith-mp4 を抜く
-    }),
-  ],
+  resolve: {
+    alias: {
+      'griffith-hls': 'griffith/null',
+      'griffith-mp4': 'griffith/null',
+    },
+  },
 }
 ```
 

diff --git a/README-zh-Hans.md b/README-zh-Hans.md
@@ -95,20 +95,29 @@ Griffith 是一个 Monorepo，使用了 [Yarn workspace](https://yarnpkg.com/lan
 
 ## 自定义构建
 
-默认情况下，webpack 等构建工具会将 `griffith-mp4` 和 `packages/griffith-hls` 打包。你可以通过构建时注入全局变量来除去插件，从而减小打包大小。
+默认情况下，webpack 等构建工具会将 `griffith-mp4` 和 `griffith-hls` 打包。你可以通过构建时注入别名来除去插件，从而减小打包大小。
 
-如果你使用 webpack，可以使用 [DefinePlugin](https://webpack.js.org/plugins/define-plugin/)：
+如果你使用 webpack，可以使用 [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealias)：
 
 ```javascript
-const {DefinePlugin} = require('webpack')
+// webpack v5+
+module.exports = {
+  resolve: {
+    alias: {
+      'griffith-hls': false,
+      'griffith-mp4': false,
+    },
+  },
+}
 
+// webpack v4
 module.exports = {
-  plugins: [
-    new DefinePlugin({
-      __WITHOUT_HLSJS__: JSON.stringify(true), // 除去 griffith-hls
-      __WITHOUT_MP4__: JSON.stringify(true), // 除去 griffith-mp4
-    }),
-  ],
+  resolve: {
+    alias: {
+      'griffith-hls': 'griffith/null',
+      'griffith-mp4': 'griffith/null',
+    },
+  },
 }
 ```
 

diff --git a/README.md b/README.md
@@ -95,20 +95,29 @@ Griffith is a Monorepo and uses [Yarn workspace](https://yarnpkg.com/lang/en/doc
 
 ## Custom Build
 
-Build tools like webpack include `griffith-mp4` and `packages/griffith-hls` by default. You can make your bundle smaller by excluding a plugin with build-time globals.
+Build tools like webpack include `griffith-mp4` and `griffith-hls` by default. You can make your bundle smaller by injecting aliases at build-time.
 
-If you use webpack, do so with [DefinePlugin](https://webpack.js.org/plugins/define-plugin/):
+If you use webpack, do so with [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealias):
 
 ```javascript
-const {DefinePlugin} = require('webpack')
+// webpack v5+
+module.exports = {
+  resolve: {
+    alias: {
+      'griffith-hls': false,
+      'griffith-mp4': false,
+    },
+  },
+}
 
+// webpack v4
 module.exports = {
-  plugins: [
-    new DefinePlugin({
-      __WITHOUT_HLSJS__: JSON.stringify(true), // excludes griffith-hls
-      __WITHOUT_MP4__: JSON.stringify(true), // excludes griffith-mp4
-    }),
-  ],
+  resolve: {
+    alias: {
+      'griffith-hls': 'griffith/null',
+      'griffith-mp4': 'griffith/null',
+    },
+  },
 }
 ```
 

diff --git a/babel.config.js b/babel.config.js
@@ -2,7 +2,7 @@ module.exports = {
   babelrcRoots: ['.', './packages/*'],
   presets: [
     ['@babel/preset-env', {targets: {node: '8.10'}}],
-    ['@babel/preset-react'],
+    ['@babel/preset-react', {useBuiltIns: true}],
   ],
   plugins: ['@babel/plugin-proposal-class-properties'],
 }
diff --git a/example/package.json b/example/package.json
@@ -19,6 +19,8 @@
   "devDependencies": {
     "babel-loader": "^8.0.4",
     "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
     "webpack-dev-server": "^3.1.10"
   }
 }
diff --git a/package.json b/package.json
@@ -9,9 +9,6 @@
   "private": true,
   "license": "MIT",
   "workspaces": {
-    "nohoist": [
-      "website/**/eslint-config-react-app/**"
-    ],
     "packages": [
       "packages/*",
       "example",
@@ -42,22 +39,25 @@
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch --notify",
-    "build:lib": "lerna run build --parallel --ignore example --ignore website --ignore griffith-standalone",
-    "build:standalone": "lerna run --scope griffith-standalone build",
+    "build:lib": "lerna run build --ignore example --ignore website",
     "deploy:website": "lerna run --scope website deploy",
-    "build": "yarn build:lib && yarn build:standalone",
+    "build": "yarn build:lib",
     "build:watch": "lerna run build:watch --stream --parallel",
     "release": "yarn build && lerna publish",
     "start": "yarn workspace example run start"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.0",
-    "@babel/plugin-proposal-class-properties": "^7.4.0",
-    "@babel/preset-env": "^7.4.2",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/core": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-react": "^7.13.13",
     "@commitlint/config-conventional": "^7.5.0",
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-replace": "^2.4.2",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.6.0",
     "commitlint": "^7.5.2",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.11.2",
@@ -73,11 +73,8 @@
     "lerna": "^3.13.1",
     "lint-staged": "^8.1.5",
     "prettier": "^1.16.4",
-    "rollup": "^1.8.0",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-node-resolve": "^4.0.1",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0"
+    "rollup": "^2.48.0",
+    "rollup-plugin-terser": "^7.0.2"
   },
   "husky": {
     "hooks": {

diff --git a/packages/griffith-standalone/index.html b/packages/griffith-standalone/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo</title>
+  </head>
+  <body>
+    <div id="player"></div>
+    <script src="../dist/index.umd.min.js"></script>
+    <script>
+      const target = document.getElementById('player')
+      const sources = {
+        hd: {
+          play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',
+        },
+        sd: {
+          play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
+        },
+      }
+      // 创建播放器
+      const player = Griffith.createPlayer(target)
+      // 载入视频
+      player.render({sources})
+    </script>
+  </body>
+</html>
diff --git a/packages/griffith-standalone/package.json b/packages/griffith-standalone/package.json
@@ -11,7 +11,7 @@
   "main": "dist/index.umd.min.js",
   "scripts": {
     "prebuild": "rm -rf dist",
-    "build": "webpack -p"
+    "build": "rollup -c"
   },
   "devDependencies": {
     "babel-loader": "^8.0.5",

diff --git a/packages/griffith-standalone/rollup.config.js b/packages/griffith-standalone/rollup.config.js
@@ -0,0 +1,48 @@
+import path from 'path'
+import babel from '@rollup/plugin-babel'
+import resolve from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
+import commonjs from '@rollup/plugin-commonjs'
+import alias from '@rollup/plugin-alias'
+import {terser} from 'rollup-plugin-terser'
+
+const pkg = require(path.resolve(process.cwd(), 'package.json'))
+
+export default [
+  {
+    input: pkg.source,
+    output: [
+      {
+        file: pkg.main,
+        format: 'umd',
+        name: 'Griffith',
+        sourcemap: false,
+      },
+    ],
+    plugins: [
+      babel(require('../../babel.config')),
+      commonjs({
+        // 不是所有的包都是 ESM（如 React 只是 CJS）
+        include: /node_modules/,
+      }),
+      alias({
+        entries: {
+          // 如果需要排除插件
+          // 'griffith-hls': 'griffith/null',
+          // 'griffith-mp4': 'griffith/null',
+        },
+      }),
+      replace({
+        preventAssignment: true,
+        values: {
+          'process.env.NODE_ENV': JSON.stringify('production'),
+        },
+      }),
+      resolve({
+        // 有些 npm 包提供了 browser 版本（如 `asap` node 版本使用了 native 模块）
+        browser: true,
+      }),
+      terser(),
+    ],
+  },
+]
diff --git a/packages/griffith-standalone/webpack.config.js b/packages/griffith-standalone/webpack.config.js
diff --git a/packages/griffith/null/null.cjs.js b/packages/griffith/null/null.cjs.js
@@ -0,0 +1 @@
+module.exports = null
diff --git a/packages/griffith/null/null.esm.js b/packages/griffith/null/null.esm.js
@@ -0,0 +1 @@
+export default null
diff --git a/packages/griffith/null/package.json b/packages/griffith/null/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "null",
+  "version": "1.0.0",
+  "main": "null.cjs.js",
+  "module": "null.esm.js",
+  "license": "MIT"
+}
diff --git a/packages/griffith/package.json b/packages/griffith/package.json
@@ -7,6 +7,7 @@
   "files": [
     "cjs",
     "esm",
+    "null",
     "index.d.ts"
   ],
   "source": "src/index.js",

diff --git a/packages/griffith/src/components/Video/selectVideo.js b/packages/griffith/src/components/Video/selectVideo.js
@@ -1,21 +1,28 @@
 import {isHlsNativeSupported, isMSESupported} from 'griffith-utils'
+import GriffithHls from 'griffith-hls'
+import GriffithMp4 from 'griffith-mp4'
 import NormalVideo from './NormalVideo'
-/* global __WITHOUT_HLSJS__:false, __WITHOUT_MP4__:false */
+import memoize from 'lodash/memoize'
 
-export default function selectVideo(format, useMSE) {
-  if (format === 'm3u8') {
-    if (typeof __WITHOUT_HLSJS__ === 'undefined' ? false : __WITHOUT_HLSJS__) {
-      return NormalVideo
-    } else if (isMSESupported() && !isHlsNativeSupported()) {
-      return require('griffith-hls').default
-    }
+function selectVideo(format, useMSE) {
+  if (
+    format === 'm3u8' &&
+    GriffithHls?.VideoComponent &&
+    isMSESupported() &&
+    !isHlsNativeSupported()
+  ) {
+    return GriffithHls
   }
-  if (format === 'mp4') {
-    if (typeof __WITHOUT_MP4__ === 'undefined' ? false : __WITHOUT_MP4__) {
-      return NormalVideo
-    } else if (isMSESupported() && useMSE) {
-      return require('griffith-mp4').default
-    }
+  if (
+    format === 'mp4' &&
+    GriffithMp4?.VideoComponent &&
+    isMSESupported() &&
+    useMSE
+  ) {
+    return GriffithMp4
   }
   return NormalVideo
 }
+
+// 内部利用了 DOM 推测，避免 render 过程中多次执行
+export default memoize(selectVideo, (...args) => String(args))
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,6 +1,6 @@
 import path from 'path'
-import babel from 'rollup-plugin-babel'
-import resolve from 'rollup-plugin-node-resolve'
+import babel from '@rollup/plugin-babel'
+import resolve from '@rollup/plugin-node-resolve'
 
 const pkg = require(path.resolve(process.cwd(), 'package.json'))
 

diff --git a/website/.eslintrc.js b/website/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  // gatsby 的 ESLint 与 root 冲突了，会导致 `eslint-config-react-app` 查找不到，禁止它
+  extends: [require.resolve('../.eslintrc.js')],
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ @@
       "files": [
         "cjs",
         "esm",
+        "null",
         "index.d.ts"
       ],
       "source": "src/index.js",
@@ Expand Down @@