feat: 修改example

Author: ddchef

.npmignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules/
+/dist/
+/demo
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/test/unit/coverage/
+/test/e2e/reports/
+selenium-debug.log
+.example/
+example/
+test/
+
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

example/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

example/.eslintignore

@@ -0,0 +1,5 @@
+/build/
+/config/
+/dist/
+/*.js
+/test/unit/coverage/

example/.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  extends: [
+    'standard',
+    'plugin:vue/recommended'
+  ],
+  rules: {
+
+  },
+  globals: {
+    __webpack_public_path__: true
+  }
+}

example/.gitignore

@@ -0,0 +1,19 @@
+.DS_Store
+node_modules/
+/dist/
+/demo
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/test/unit/coverage/
+/test/e2e/reports/
+selenium-debug.log
+.example/
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

example/.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

example/.stylelintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "stylelint-config-standard",
+  "ignoreFiles": ["./node_modules/**/*.css","./dist/**/*.css"]
+}

example/README.md

@@ -0,0 +1,54 @@
+# [vue-code-diff](https://www.npmjs.com/package/vue-code-diff)
+
+> 代码比对展示 [demo](http://diff.xjie.me/)
+
+## 安装
+```shell
+yarn add vue-code-diff
+```
+
+## 使用
+```vue
+<template>
+  <div>
+    <code-diff :old-string="oldStr" :new-string="newStr" :context="10" />
+  </div>
+</template>
+
+import CodeDiff from 'vue-code-diff'
+export default {
+  components: {CodeDiff},
+  data(){
+    return {
+      oldStr: 'old code',
+      newStr: 'new code'
+    }
+  }
+}
+```
+
+## 参数说明
+
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| old-string| 陈旧的字符串| string  |   —    |    —     |
+| new-string| 新的字符串| string  |   —    |    —     |
+| context| 不同地方上下间隔多少行不隐藏 | number  |   —    |    —     |
+| outputFormat| 展示的方式 | string  |   line-by-line，side-by-side    |    line-by-line     |
+| drawFileList | 展示对比文件列表 | boolean | - | false |
+| renderNothingWhenEmpty | 当无对比时不渲染 | boolean | - | false |
+| diffStyle | 每行中对比差异级别 | string | word, char | word |
+| fileName | 文件名 | string | - |  |
+| isShowNoChange | 当无对比时展示源代码 | boolean | - | false |
+
+
+## 效果展示
+
+### line-by-line
+![image](https://github.com/ddchef/vue-code-diff/blob/master/2018-06-01.png?raw=true)
+
+### side-by-side
+![image](https://github.com/ddchef/vue-code-diff/blob/master/2018050615272.png?raw=true)
+
+## LICENSE
+[MIT](LICENSE)

example/babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    [
+      '@vue/app'
+    ]
+  ],
+  plugins: [
+    [
+      '@babel/plugin-transform-runtime',{
+        corejs: 3,
+      }
+    ]
+  ]
+}

example/build/build.js

@@ -0,0 +1,35 @@
+const webpack = require('webpack')
+const ora = require('ora')
+const chalk = require('chalk')
+const webpackConfig = require('./config')
+
+webpackConfig().then(({ prodConfig }) => {
+  const isAnalyzer = process.argv[2] === 'analyzer'
+  if (isAnalyzer) {
+    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+    prodConfig.plugins.push(
+      new BundleAnalyzerPlugin()
+    )
+  }
+  const spinner = ora('Builing for production...').start()
+  webpack(prodConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      modules: false,
+      colors: true,
+      // 添加 children 信息
+      children: false,
+      // 添加 chunk 信息（设置为 `false` 能允许较少的冗长输出）
+      chunks: false,
+      // 将构建模块信息添加到 chunk 信息
+      chunkModules: false
+    }) + '\n\n')
+    if (stats.hasErrors()) {
+      console.log(chalk.red('Build failed with errors.\n'))
+      process.exit(1)
+    }
+    console.log(chalk.cyan('Build complete.\n'))
+    if (!isAnalyzer) process.exit(0)
+  })
+})

example/build/config/index.js

@@ -0,0 +1,31 @@
+const portfinder = require('portfinder')
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
+const ProgressBarWebpackPlugin = require('progress-bar-webpack-plugin')
+const chalk = require('chalk')
+const webpackProdConfig = require('./webpack.prod')
+const webpackDevConfig = require('./webpack.dev')
+
+module.exports = async () => {
+  portfinder.basePort = 3010
+  const port = await portfinder.getPortPromise()
+  webpackDevConfig.devServer.port = port
+
+  webpackDevConfig.plugins.push(
+    new FriendlyErrorsWebpackPlugin(
+      {
+        compilationSuccessInfo: {
+          messages: [`You application is running here http://localhost:${port}`]
+        }
+      }
+    )
+  )
+  webpackDevConfig.plugins.push(new ProgressBarWebpackPlugin({
+    format: `:msg [${chalk.green(':bar')}]${chalk.yellow.bold(':percent')} (:elapseds)`,
+    complete: ':',
+    incomplete: ' '
+  }))
+  return {
+    devConfig: webpackDevConfig,
+    prodConfig: webpackProdConfig
+  }
+}

example/build/config/utils.js

@@ -0,0 +1,58 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const cssLoader = {
+  less: {
+    loader: 'less-loader',
+    options: {
+      javascriptEnabled: true,
+      strictMath: false
+    }
+  },
+  scss: {
+    loader: 'sass-loader'
+  },
+  postcss: {
+    loader: 'postcss-loader'
+  }
+}
+function baseCssLoader (type, prod) {
+  return {
+    test: new RegExp(`\.(${type})$`),
+    use: [
+      prod
+        ? {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../../'
+            }
+          }
+        : 'style-loader',
+      'css-loader',
+      'postcss-loader',
+      cssLoader[type]
+    ]
+  }
+}
+
+function setBaseCssLoaders (types = [], prod = false) {
+  return [
+    {
+      test: /\.(css)$/,
+      use: [
+        prod
+          ? {
+              loader: MiniCssExtractPlugin.loader,
+              options: {
+                publicPath: '../../'
+              }
+            }
+          : 'style-loader',
+        'css-loader'
+      ]
+    },
+    ...types.map(type => baseCssLoader(type, prod))
+  ]
+}
+
+module.exports = {
+  setBaseCssLoaders
+}

example/build/config/webpack.analyzer.js

@@ -0,0 +1,8 @@
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const prodConfig = require('./webpack.prod')
+
+prodConfig.plugins.push(
+  new BundleAnalyzerPlugin()
+)
+
+module.exports = prodConfig

example/build/config/webpack.base.js

@@ -0,0 +1,94 @@
+const path = require('path')
+const { VueLoaderPlugin } = require('vue-loader')
+const { ProvidePlugin } = require('webpack')
+const EslintPlugin = require('eslint-webpack-plugin')
+const StyleLintPlugin = require('stylelint-webpack-plugin')
+
+const basePath = process.cwd()
+
+module.exports = () => ({
+  entry: {
+    main: '/src/main.js'
+  },
+  output: {
+    path: path.join(basePath, 'dist'),
+    filename: `static/js/[name].js`
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(vue)$/,
+        use: [
+          'vue-loader'
+        ]
+      },
+      {
+        test: /\.(js|jsx)$/,
+        use: [
+          {
+            loader: 'babel-loader?cacheDirectory'
+          }
+        ],
+        exclude (filePath) {
+          return (
+            /node_modules/.test(filePath) &&
+            !/@ailpha(\\|\/)ml/.test(filePath)
+          )
+        }
+      },
+      {
+        test: /\.(png|jpg|gif|jpeg)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8 * 1024,
+              outputPath: 'static/images',
+              esModule: false
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(svg|woff|woff2|ttf|otf|eot)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              outputPath: 'static/fonts'
+            }
+          }
+        ]
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      '@': path.join(process.cwd(), 'src'),
+      vue$: process.env.NODE_ENV === 'production' ? 'vue/dist/vue.runtime.js' : 'vue/dist/vue.esm.js'
+    },
+    fallback: {
+      timers: false,
+      http: false,
+      url: false,
+      util: false,
+      os: false,
+      stream: require.resolve('stream-browserify'),
+      crypto: require.resolve('crypto-browserify')
+    },
+    extensions: ['.js', '.vue', '.json', '.jsx', '.css']
+  },
+  plugins: [
+    new StyleLintPlugin({
+      files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}']
+    }),
+    new EslintPlugin(),
+    new ProvidePlugin({
+      process: 'process',
+      Buffer: ['buffer', 'Buffer']
+    }),
+    new VueLoaderPlugin()
+  ],
+  optimization: {
+  }
+})