support ssr

.gitignore

@@ -146,4 +146,7 @@ public/bundle/*
 nbproject/*
 .DS_Store
 .devhost
-examples/dist/
+examples/dist/
+/vue-json-viewer.js
+/ssr.js
+/style.css

build/webpack.config.js

@@ -22,10 +22,11 @@ module.exports = {
         ],
     },
     output: {
-        path: path.join(__dirname, '../dist'),
+        path: path.join(__dirname, '../'),
         filename: 'vue-json-viewer.js',
         libraryTarget: 'umd',
-        library: 'JsonView'
+        library: 'JsonView',
+        globalObject: 'this'
     },
     resolve: {
         extensions: ['.js', '.vue'],
@@ -45,7 +46,7 @@ module.exports = {
             },
             {
                 test: /\.s?css$/,
-                use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
+                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
             },
             {
                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

build/webpack.ssr.config.js

@@ -0,0 +1,91 @@
+const path = require('path');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = {
+    mode: 'production',
+    entry: './lib/index.js',
+    optimization: {
+        minimizer: [
+          new UglifyJsPlugin({
+            cache: true,
+            parallel: true,
+            sourceMap: false,
+            uglifyOptions: {
+              compress: {
+                warnings: false
+              },
+              comments: false
+            }
+          }),
+          new OptimizeCSSAssetsPlugin({
+            cssProcessorOptions: { safe: true, sourceMap: false}
+          })
+        ],
+    },
+    output: {
+        path: path.join(__dirname, '../'),
+        filename: 'ssr.js',
+        libraryTarget: 'umd',
+        library: 'JsonView',
+        globalObject: 'this'
+    },
+    resolve: {
+        extensions: ['.js', '.vue'],
+        modules: [
+            'node_modules'
+        ]
+    },
+    externals: {
+      vue: 'vue'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                exclude: /node_modules/
+            },
+            {
+                test: /\.s?css$/,
+                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: 'img/[name].[ext]'
+                }
+            },
+            {
+                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: 'fonts/[name].[ext]'
+                }
+            },
+            {
+                test: /\.vue$/,
+                use: [{
+                    loader: 'vue-loader'
+                }]
+            }
+        ]
+    },
+    plugins: [
+        new VueLoaderPlugin(),
+        new MiniCssExtractPlugin({
+          filename: 'style.css',
+          allChunks: true,
+        })
+    ]
+}
+
+if (process.argv.some(a => a === '--report')) {
+    module.exports.plugins.push(new BundleAnalyzerPlugin());
+}

example/app.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import JsonViewer from '../dist/vue-json-viewer'
+import JsonViewer from '../vue-json-viewer'
 
 Vue.use(JsonViewer)
 

package.json

@@ -1,17 +1,21 @@
 {
   "name": "vue-json-viewer",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "vuejs展示json的组件",
-  "main": "dist/vue-json-viewer.js",
+  "main": "vue-json-viewer.js",
   "files": [
-    "dist/*"
+    "vue-json-viewer.js",
+    "ssr.js",
+    "style.css"
   ],
   "directories": {
     "lib": "./lib",
     "example": "./example"
   },
   "scripts": {
-    "build": "webpack --config ./build/webpack.config.js",
+    "build": "npm run build:browser && npm run build:ssr",
+    "build:browser": "webpack --config ./build/webpack.config.js",
+    "build:ssr": "webpack --config ./build/webpack.ssr.config.js",
     "example": "webpack-dev-server --config ./example/build/webpack.dev.conf.js"
   },
   "repository": {
@@ -61,7 +65,9 @@
     "eslint-plugin-vue": "^5.0.0-beta.3",
     "file-loader": "^1.1.5",
     "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.5.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.0",