docs: supported CDN import

TUBB · Jul 31, 2021 · 4185391 · 4185391
1 parent fcdda83
commit 4185391
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 node_modules
 dist
+umd
 *.log
 *.tgz
 .env
@@ -10,4 +11,6 @@ package-lock.json
 webpack.dev.app.js
 src/apptest/
 coverage
-preview
+preview
+public/script-test.html
+public/h5-imageviewer-v0.7.2.js
diff --git a/README.md b/README.md
@@ -28,6 +28,9 @@ You can install it via npm:
 npm i h5-imageviewer
 ```
 
+Or get it from CDN:
+[https://unpkg.com/[email protected]/umd/pobi-imageviewer.js](https://unpkg.com/[email protected]/umd/pobi-imageviewer.js)
+
 # Usage
 Show single image viewer
 ```js

diff --git a/package.json b/package.json
@@ -1,15 +1,17 @@
 {
   "name": "h5-imageviewer",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "Image viewer for mobile browser, supported React/Vue/AngularJS.",
-  "main": "dist/bundle.js",
+  "main": "bundle.js",
   "files": [
     "dist",
+    "umd",
     "src/index.d.ts"
   ],
   "types": "./src/index.d.ts",
   "scripts": {
-    "build": "webpack --config webpack.pro.js",
+    "build": "webpack --config webpack.pro.js && webpack --config webpack.pro.script.js",
+    "buildScript": "webpack --config webpack.pro.script.js",
     "preview": "webpack --config webpack.preview.js",
     "watch": "webpack --watch",
     "dev": "webpack-dev-server --config webpack.dev.js --disableHostCheck=true",

diff --git a/public/cdn-test.html b/public/cdn-test.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">  
+  <meta name="format-detection" content="telephone=no">
+  <title>H5 mobile image viewer</title>
+  <script src="https://unpkg.com/[email protected]/umd/pobi-imageviewer.js"></script>
+  <script src="./vconsole.min.js"></script>
+  <script>
+    // init vConsole
+    var vConsole = new VConsole();
+    function showImage() {
+      PobiImageViewer.showViewer(
+        {src: 'http://localhost:8080/737a71084999bb9ee329f7afead08564.jpg'},
+        {
+          onPageChanged: pageIndex => {
+            console.log('onPageChanged', pageIndex)
+          },
+        }
+      )
+    }
+    function showImageList() {
+      PobiImageViewer.showImgListViewer(
+        [
+          {src: 'http://localhost:8080/737a71084999bb9ee329f7afead08564.jpg'},
+          {src: 'http://localhost:8080/2e0036ab635f5b7dbcef2ca82b1cdca5.jpg'}
+        ],
+        {
+          onPageChanged: pageIndex => {
+            console.log('onPageChanged', pageIndex)
+          },
+          onViewerHideListener: () => {
+            console.log('image list viewer hide')
+          },
+        }
+      )
+    }
+  </script>
+</head>
+<body>
+  <div id="root">
+    <button onclick="showImage()">Show image</button>
+    <button onclick="showImageList()">Show image list</button>
+  </div>
+</body>
+</html>
diff --git a/src/utils/scrollThrough.js b/src/utils/scrollThrough.js
@@ -7,7 +7,7 @@ function getScrollLeft () {
 const toggleForbidScrollThrough = (function toggleForbidScrollThrough () {
   let scrollTop
   let scrollLeft
-  const bodyPosition = document.body.style.position || 'static'
+  const bodyPosition = document.body ? (document.body.style.position || 'static') : 'static'
   return function toggleForbidScrollThroughInner (isForbide) {
     if (isForbide) {
       scrollTop = getScrollTop()

diff --git a/webpack.pro.script.js b/webpack.pro.script.js
@@ -0,0 +1,71 @@
+const path = require('path')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const nodeExternals = require('webpack-node-externals')
+const { version } = require('./package.json')
+
+module.exports = {
+  mode: 'production',
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'umd'),
+    filename: "pobi-imageviewer.js",
+    libraryExport: "default",
+    libraryTarget: "umd",
+    library: "PobiImageViewer"
+  },
+  module: {
+    rules: [
+      {
+        test: /.js$/,
+        use: 'babel-loader'
+      },
+      {
+        test: /.css$/,
+        use: [
+          'style-loader',
+          'css-loader'
+        ]
+      },
+      {
+        test: /.less$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'less-loader',
+          {
+            // css3前缀自动补全
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [
+                require('autoprefixer')({})
+              ]
+            }
+          }
+        ]
+      },
+      {
+        test: /.(jpg|png|gif|jpeg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              limit: 10240,
+              // 文件内容hash
+              name: '[name]_[hash:8].[ext]'
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    // css代码压缩
+    new OptimizeCSSAssetsPlugin({
+      assetNameRegExp: /\.css$/g,
+      cssProcessor: require('cssnano')
+    })
+  ],
+  devtool: 'source-map'
+}