fix: optimize umd output name & add index.module.css #161 #150

lijinke666 · Sep 21, 2020 · 7179965 · 7179965
1 parent 8424494
commit 7179965
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -88,6 +88,9 @@ npm install react-jinke-music-player --save
 - [x] Support typescript (d.ts)
 - [x] Support lyric
 - [x] Play list
+- [x] Full player features
+- [x] [Server-Side Rendering](#bulb-server-side-rendering)
+- [x] [Import in Browser](#bulb-import-in-browser)
 - [x] [Complete hook function](#clipboard-api)
 - [x] [Custom operation ui](#bulb-custom-operation-ui)
 - [x] [Custom downloader](#bulb-custom-downloader)
@@ -534,6 +537,49 @@ export interface ReactJkMusicPlayerIcon {
  */
 ```
 
+## :bulb: Import in browser
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/assets/index.css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+  <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist/react-jinke-music-player.min.js"></script>
+  <script>
+    ReactDOM.render(
+      React.createElement(ReactJkMusicPlayer),
+      document.getElementById('root'),
+    )
+  </script>
+</html>
+```
+
+## :bulb: Server-Side Rendering
+
+```jsx
+// components/Player.js
+import React from 'react'
+import ReactJkMusicPlayer from 'react-jinke-music-player'
+import styles from 'react-jinke-music-player/assets/index.module.css'
+
+export const Player = () => <ReactJkMusicPlayer />
+
+// pages/_app.js
+import dynamic from 'next/dynamic'
+const PlayerWithNoSSR = dynamic(() => import('../components/Player'), {
+  ssr: false,
+})
+```
+
 ## :pencil: Development
 
 ```bash

diff --git a/package.json b/package.json
@@ -24,9 +24,10 @@
     "build:cjs": "cross-env OUTPUT_MODULE=commonjs babel src -d lib",
     "build:es": "babel src -d es",
     "build:umd": "webpack --config webpack.umd.config.js --progress",
-    "build": "cross-env NODE_ENV=production yarn build:clean && yarn build:js && yarn build:css && yarn copy:less",
+    "build": "cross-env NODE_ENV=production yarn build:clean && yarn build:js && yarn build:css && yarn copy:less && yarn copy:module-css",
     "build:demo": "cross-env NODE_ENV=production webpack --progress --config  ./example/webpack.config.js",
     "build:netlify": "cross-env NETLIFY=true yarn build:demo ",
+    "copy:module-css": "cp ./assets/index.css ./assets/index.module.css",
     "copy:less": "cp -r src/styles lib/styles && cp -r src/styles es/styles",
     "demo": "cross-env NODE_ENV=development webpack-dev-server --progress --inline --hot --config  ./example/webpack.config.js",
     "test": "jest __tests__/tests",

diff --git a/webpack.umd.config.js b/webpack.umd.config.js
@@ -9,13 +9,13 @@ module.exports = {
   entry: {
     [name]: path.resolve(__dirname, 'src/index'),
   },
-
   output: {
-    library: name,
+    library: 'ReactJkMusicPlayer',
     libraryTarget: 'umd',
     umdNamedDefine: true, // 是否将模块名称作为 AMD 输出的命名空间
     path: path.resolve(__dirname, 'dist'),
     filename: '[name].min.js',
+    libraryExport: 'default', // 将default默认导出, 不然会 window['xx'].default
   },
   externals: {
     react: {