完成km-excel基本重构

Author: KevinMint55

.babelrc

@@ -1,18 +1,23 @@
 {
   "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+        }
       }
-    }],
-    "stage-2"
+    ]
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime", [
-    "component",
-    {
-      "libraryName": "element-ui",
-      "styleLibraryName": "theme-chalk"
-    }
-  ]]
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
+  ]
 }

.eslintrc.js

@@ -0,0 +1,42 @@
+const path = require('path');
+
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    'airbnb-base',
+  ],
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: path.resolve(__dirname, './build/webpack.base.conf.js')
+      }
+    }
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'linebreak-style': 'off',
+    'no-mixed-operators': 'off',
+    'max-len': [1, 300],
+    'default-case': 0,
+    'func-names': 0,
+    'no-param-reassign': 0,
+    'no-console': 'off',
+    'no-underscore-dangle': 'off',
+    'no-lonely-if': 0,
+    'import/no-extraneous-dependencies': 0,
+    'global-require': 0,
+    'prefer-promise-reject-errors': 'off',
+    "consistent-return": 0,
+    "no-prototype-builtins": 0,
+    "no-restricted-globals": 0,
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+};

.gitignore

@@ -1,11 +1,10 @@
 .DS_Store
 node_modules/
+/dist/
 /demo/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-/*.lock
-package-lock.json
 
 # Editor directories and files
 .idea
@@ -14,4 +13,3 @@ package-lock.json
 *.ntvs*
 *.njsproj
 *.sln
-/.svn

.npmignore

@@ -1,2 +1,4 @@
+.*
 build/
-node_modules/
+node_modules/
+demo/

.postcssrc.js

@@ -3,8 +3,6 @@
 module.exports = {
   "plugins": {
     "postcss-import": {},
-    "postcss-url": {},
-    // to edit target browsers: use "browserslist" field in package.json
     "autoprefixer": {}
   }
 }

README.md

@@ -1,21 +1 @@
-# km-excel
-
-> km-excel
-
-## Build Setup
-
-``` bash
-# install dependencies
-npm install
-
-# serve with hot reload at localhost:8080
-npm run dev
-
-# build for production with minification
-npm run build
-
-# build for production and view the bundle analyzer report
-npm run build --report
-```
-
-For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+# km-excel

build/build.js

@@ -1,40 +1,34 @@
-'use strict'
+process.env.NODE_ENV = 'production';
 
-process.env.NODE_ENV = 'production'
+const webpack = require('webpack');
+const chalk = require('chalk');
+const ora = require('ora');
+const buildWebpackConfig = require('./webpack.prod.conf');
 
-const ora = require('ora')
-const rm = require('rimraf')
-const path = require('path')
-const chalk = require('chalk')
-const webpack = require('webpack')
-const config = require('../config')
-const webpackConfig = require('./webpack.prod.conf')
+(() => {
+  const spinner = ora('构建中...');
+  spinner.start();
 
-const spinner = ora('building for production...')
-spinner.start()
-
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
-  if (err) throw err
-  webpack(webpackConfig, (err, stats) => {
-    spinner.stop()
-    if (err) throw err
-    process.stdout.write(stats.toString({
+  webpack(buildWebpackConfig, (err, status) => {
+    spinner.stop();
+    if (err) throw err;
+    process.stdout.write(status.toString({
       colors: true,
       modules: false,
-      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      children: false,
       chunks: false,
       chunkModules: false
-    }) + '\n\n')
+    }) + '\n\n');
 
-    if (stats.hasErrors()) {
-      console.log(chalk.red('  Build failed with errors.\n'))
-      process.exit(1)
+    if (status.hasErrors()) {
+      console.log(chalk.red('  构建出错！！！\n'));
+      process.exit(1);
     }
 
-    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.cyan('  构建成功！！！\n'));
     console.log(chalk.yellow(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
-      '  Opening index.html over file:// won\'t work.\n'
-    ))
-  })
-})
+      '  Tip: 构建的文件需要通过HTTP服务启动.\n' +
+      '  直接打开 index.html 在 file:// 没有作用.\n'
+    ));
+  });
+})();

build/devServer.js

@@ -0,0 +1,46 @@
+const path = require('path');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
+const devWebpackConfig = require('./webpack.dev.conf');
+const config = require('../config');
+
+const options = {
+  publicPath: config.dev.assetsPublicPath,
+  clientLogLevel: 'warning',
+  contentBase: false,
+  historyApiFallback: true,
+  hot: true,
+  host: '0.0.0.0',
+  inline: true,
+  compress: true,
+  overlay: { warnings: false, errors: true },
+  quiet: true,
+  watchOptions: {
+    ignored: [/node_modules/],
+    poll: true,
+  },
+};
+
+const getIPAddress = () => {
+  const interfaces = require('os').networkInterfaces();
+  for (let devName in interfaces) {
+    for (let alias of interfaces[devName]) {
+      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
+        return alias.address;
+      }
+    }
+  }
+}
+
+(() => {
+  const pkgConfig = require(`${path.resolve(__dirname, '../package.json')}`);
+  const IP = getIPAddress();
+  devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+    compilationSuccessInfo: {
+      messages: [`${pkgConfig.name} 运行地址: http://${IP}:${config.dev.port}`],
+    },
+  }));
+  WebpackDevServer.addDevServerEntrypoints(devWebpackConfig, options);
+  new WebpackDevServer(webpack(devWebpackConfig), options).listen(config.dev.port, '0.0.0.0', () => { });
+})();

build/release.js

@@ -1,40 +1,34 @@
-'use strict'
+process.env.NODE_ENV = 'production';
 
-process.env.NODE_ENV = 'production'
+const webpack = require('webpack');
+const chalk = require('chalk');
+const ora = require('ora');
+const buildWebpackConfig = require('./webpack.release.conf');
 
-const ora = require('ora')
-const rm = require('rimraf')
-const path = require('path')
-const chalk = require('chalk')
-const webpack = require('webpack')
-const config = require('../config')
-const webpackConfig = require('./webpack.release.conf')
+(() => {
+  const spinner = ora('构建中...');
+  spinner.start();
 
-const spinner = ora('building for production...')
-spinner.start()
-
-rm(path.join(config.release.assetsRoot, config.release.assetsSubDirectory), err => {
-  if (err) throw err
-  webpack(webpackConfig, (err, stats) => {
-    spinner.stop()
-    if (err) throw err
-    process.stdout.write(stats.toString({
+  webpack(buildWebpackConfig, (err, status) => {
+    spinner.stop();
+    if (err) throw err;
+    process.stdout.write(status.toString({
       colors: true,
       modules: false,
-      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      children: false,
       chunks: false,
       chunkModules: false
-    }) + '\n\n')
+    }) + '\n\n');
 
-    if (stats.hasErrors()) {
-      console.log(chalk.red('  Build failed with errors.\n'))
-      process.exit(1)
+    if (status.hasErrors()) {
+      console.log(chalk.red('  构建出错！！！\n'));
+      process.exit(1);
     }
 
-    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.cyan('  构建成功！！！\n'));
     console.log(chalk.yellow(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
-      '  Opening index.html over file:// won\'t work.\n'
-    ))
-  })
-})
+      '  Tip: 构建的文件需要通过HTTP服务启动.\n' +
+      '  直接打开 index.html 在 file:// 没有作用.\n'
+    ));
+  });
+})();