v1.0.0

Author: abu3389

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@vue/cli-plugin-babel/preset"
+  ]
+}

.env.dev

@@ -0,0 +1,3 @@
+NODE_ENV = development
+
+VUE_APP_ENV = development

.env.doc

@@ -0,0 +1 @@
+VUE_APP_ENV = doc

.env.iframe

@@ -0,0 +1,3 @@
+NODE_ENV = production
+
+VUE_APP_ENV = iframe

.env.pro

@@ -0,0 +1,3 @@
+NODE_ENV = production
+
+VUE_APP_ENV = production

.eslintignore

@@ -0,0 +1,4 @@
+lib
+dist
+file-viewer
+vendors

.eslintrc.js

@@ -0,0 +1,29 @@
+/*
+ * @Author: zhanghan
+ * @Date: 2023-01-04 13:49:25
+ * @LastEditors: zhanghan
+ * @LastEditTime: 2023-01-10 00:16:51
+ * @Descripttion:
+ */
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ['plugin:vue/essential', 'eslint:recommended'],
+  parserOptions: {
+    parser: '@babel/eslint-parser'
+  },
+  rules: {
+    'no-console': 'off',
+    'no-debugger': 'off',
+    'no-unused-vars': ['error', { args: 'none' }], // 允许函数参数未使用
+    'no-control-regex': 0, // 允许在正则表达式中使用控制字符
+    //关闭组件命名规则
+    'vue/multi-word-component-names': 'off',
+    // 强制使用单引号
+    quotes: ['error', 'single'],
+    // 强制不使用分号结尾
+    semi: ['error', 'never']
+  }
+}

.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+node_modules
+/dist
+/lib
+/docdist
+.cache
+.temp
+doc/.vuepress/dist/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

README.md

@@ -0,0 +1,25 @@
+# vue-file-viewer
+
+### 安装
+
+```
+yarn install
+```
+
+### 启动本地演示调试
+
+```
+yarn run serve
+```
+
+### 打包成 npm 组件
+
+```
+yarn run build
+```
+
+### 打包项目提供 iframe 入口使用
+
+```
+yarn run build:iframe
+```

babel.config.js

@@ -0,0 +1,10 @@
+/*
+ * @Author: zhanghan
+ * @Date: 2022-11-27 19:21:21
+ * @LastEditors: zhanghan
+ * @LastEditTime: 2022-11-28 20:19:04
+ * @Descripttion: babe配置
+ */
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset']
+}

config/config.build.iframe.js

@@ -0,0 +1,48 @@
+/*
+ * @Author: zhanghan
+ * @Date: 2022-11-28 09:13:53
+ * @LastEditors: zhanghan
+ * @LastEditTime: 2023-01-10 15:07:37
+ * @Descripttion: iframe开发环境配置
+ */
+const path = require('path')
+// 获取当前工作目录
+const cwd = process.cwd()
+
+module.exports = {
+  publicPath: '/file-viewer',
+  // 放在public下供项目演示时作为iframe入口使用
+  outputDir: path.join(cwd, '/public/file-viewer'),
+  pages: {
+    index: {
+      entry: 'examples/main.js',
+      template: 'public/index.html',
+      filename: 'index.html'
+    }
+  },
+  assetsDir: 'static',
+  // 扩展 webpack 配置
+  chainWebpack: (config) => {
+    // set worker-loader
+    config.module
+      .rule('worker')
+      .test(/\.worker\.js$/)
+      .use('worker-loader')
+      .loader('worker-loader')
+      .end()
+
+    // 解决：worker 热更新问题
+    config.module.rule('js').exclude.add(/\.worker\.js$/)
+
+    // packages 加入编译
+    config.module
+      .rule('js')
+      .include.add('/packages')
+      .end()
+      .use('babel')
+      .loader('babel-loader')
+
+    // 别名配置
+    config.resolve.alias.set('@', '/examples').set('@packages', '/packages')
+  }
+}

config/config.build.js

@@ -0,0 +1,73 @@
+/*
+ * @Author: zhanghan
+ * @Date: 2022-11-28 09:13:53
+ * @LastEditors: zhanghan
+ * @LastEditTime: 2023-01-09 21:49:06
+ * @Descripttion: 生产环境配置
+ */
+
+const path = require('path')
+//  获取基于当前路径的目标文件
+const resolve = (dir) => path.join(__dirname, '../', dir)
+
+const buildConfig = {
+  //  输出文件目录
+  outputDir: resolve('lib'),
+  productionSourceMap: false,
+  //  webpack配置
+  configureWebpack: {
+    //  入口文件(这里获取到的是每个独立包的入口文件地址数组)
+    entry: {
+      // 全量引入的文件入口
+      index: resolve('packages')
+    },
+    //  输出配置
+    output: {
+      //  主入口文件名称
+      filename: '[name]/index.js',
+      //  构建依赖类型
+      libraryTarget: 'umd',
+      //  库中被导出的项
+      libraryExport: 'default',
+      //  引用时的依赖名
+      library: 'vue-file-viewer'
+    }
+  },
+  css: {
+    sourceMap: false,
+    // 是否将组件中的css提取至一个独立的css，库构建时可以设置为false，免得用户需要自己导入css
+    extract: false
+    // extract: {
+    //   filename: '[name]/index.css',
+    // },
+  },
+  chainWebpack: (config) => {
+    // set worker-loader
+    config.module
+      .rule('worker')
+      .test(/\.worker\.js$/)
+      .use('worker-loader')
+      .loader('worker-loader')
+      .end()
+
+    // 解决：worker 热更新问题
+    config.module.rule('js').exclude.add(/\.worker\.js$/)
+
+    // 一些构建优化
+    // 删除splitChunks，因为每个组件是独立打包，不需要抽离每个组件的公共js出来。
+    config.optimization.delete('splitChunks')
+    // 删除copy，不要复制public文件夹内容到lib文件夹中。
+    config.plugins.delete('copy')
+    // 删除preload以及prefetch，因为不生成html页面，所以这两个也没用。
+    config.plugins.delete('preload')
+    config.plugins.delete('prefetch')
+    // 删除html，只打包组件，不生成html页面。
+    config.plugins.delete('html')
+    // 删除hmr，删除热更新。
+    config.plugins.delete('hmr')
+    // 删除自动加上的入口App。
+    config.entryPoints.delete('app')
+  }
+}
+
+module.exports = buildConfig

config/config.dev.js

@@ -0,0 +1,41 @@
+/*
+ * @Author: zhanghan
+ * @Date: 2022-11-28 09:13:53
+ * @LastEditors: zhanghan
+ * @LastEditTime: 2023-01-09 23:53:58
+ * @Descripttion: 开发环境配置
+ */
+
+module.exports = {
+  pages: {
+    index: {
+      entry: 'examples/main.js',
+      template: 'public/index.html',
+      filename: 'index.html'
+    }
+  },
+  // 扩展 webpack 配置
+  chainWebpack: (config) => {
+    // set worker-loader
+    config.module
+      .rule('worker')
+      .test(/\.worker\.js$/)
+      .use('worker-loader')
+      .loader('worker-loader')
+      .end()
+
+    // 解决：worker 热更新问题
+    config.module.rule('js').exclude.add(/\.worker\.js$/)
+
+    // packages 加入编译
+    config.module
+      .rule('js')
+      .include.add('/packages')
+      .end()
+      .use('babel')
+      .loader('babel-loader')
+
+    // 别名配置
+    config.resolve.alias.set('@', '/examples').set('@packages', '/packages')
+  }
+}

config/config.doc.js

@@ -0,0 +1,51 @@
+/*
+ * @Author: zhanghan
+ * @Date: 2022-11-28 09:13:53
+ * @LastEditors: zhanghan
+ * @LastEditTime: 2023-01-10 15:44:37
+ * @Descripttion: 文档环境配置
+ */
+
+module.exports = {
+  outputDir: './doc-dist',
+  publicPath: '/file-viewer-doc',
+  assetsDir: 'static',
+  pages: {
+    index: {
+      entry: 'doc/main.js',
+      template: 'public/index.html',
+      filename: 'index.html'
+    }
+  },
+  // 扩展 webpack 配置
+  chainWebpack: (config) => {
+    // set worker-loader
+    config.module
+      .rule('worker')
+      .test(/\.worker\.js$/)
+      .use('worker-loader')
+      .loader('worker-loader')
+      .end()
+
+    // 解决：worker 热更新问题
+    config.module.rule('js').exclude.add(/\.worker\.js$/)
+
+    // packages 加入编译
+    config.module
+      .rule('js')
+      .include.add('/packages')
+      .end()
+      .use('babel')
+      .loader('babel-loader')
+
+    // 别名配置
+    config.resolve.alias.set('@', '/doc').set('@packages', '/packages')
+  },
+  css: {
+    loaderOptions: {
+      sass: {
+        data: '@import "~@/style/imports.scss";'
+      }
+    }
+  }
+}