增加 cross-env 依赖，npm 命令更改: npm run buid 生成 example 页面，npm run dist 生成最终可供发布使用的源组件

Author: leezng

build/utils.js

@@ -34,7 +34,7 @@ exports.cssLoaders = function (options) {
 
     // Extract CSS when that option is specified
     // (which is the case during production build)
-    if (options.extract) {
+    if (options.extract && !!!process.env.DIST_ENV) {
       return ExtractTextPlugin.extract({
         use: loaders,
         fallback: 'vue-style-loader'

build/webpack.prod.conf.js

@@ -9,6 +9,8 @@ var HtmlWebpackPlugin = require('html-webpack-plugin')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 
+var isDist = !!process.env.DIST_ENV
+
 var env = process.env.NODE_ENV === 'testing'
   ? require('../config/test.env')
   : config.build.env
@@ -35,8 +37,22 @@ var webpackConfig = merge(baseWebpackConfig, {
       compress: {
         warnings: false
       },
-      sourceMap: true
-    }),
+      sourceMap: config.build.productionSourceMap
+    })
+  ]
+})
+
+if (isDist) {
+  webpackConfig.entry = {
+    'vue-json-pretty': './src/index.js'
+  }
+  webpackConfig.output = {
+    filename: './dist/[name].js',
+    library: 'VueJsonPretty',
+    libraryTarget: 'umd'
+  }
+} else {
+  webpackConfig.plugins.push(
     // extract css into its own file
     new ExtractTextPlugin({
       filename: utils.assetsPath('css/[name].[contenthash].css')
@@ -97,8 +113,8 @@ var webpackConfig = merge(baseWebpackConfig, {
         ignore: ['.*']
       }
     ])
-  ]
-})
+  )
+}
 
 if (config.build.productionGzip) {
   var CompressionWebpackPlugin = require('compression-webpack-plugin')

config/index.js

@@ -8,7 +8,7 @@ module.exports = {
     assetsRoot: path.resolve(__dirname, '../example-dist'),
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    productionSourceMap: true,
+    productionSourceMap: false,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
     // Before setting to `true`, make sure to:

package.json

@@ -6,7 +6,8 @@
   "private": true,
   "scripts": {
     "dev": "node build/dev-server.js",
-    "build-example": "node build/build.js",
+    "build": "node build/build.js",
+    "dist": "cross-env DIST_ENV=true npm run build",
     "e2e": "node test/e2e/runner.js",
     "test": "npm run e2e",
     "lint": "eslint --ext .js,.vue src test/e2e/specs"
@@ -27,6 +28,7 @@
     "chromedriver": "^2.27.2",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^5.0.5",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",
     "cssnano": "^3.10.0",

src/index.js

@@ -1,13 +1,5 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import App from './App'
+import VueJsonPretty from './components/tree.vue'
 
-Vue.config.productionTip = false
-
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  template: '<App/>',
-  components: { App }
+export default Object.assign({}, VueJsonPretty, {
+  version: '1.0.0'
 })