Upgrade webpack to 3.x and optimize babel, karma, eslint configurations

PeachScript · PeachScript · commit 8757c227b1c1 · 2017-09-15T21:36:48.000+08:00
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,23 @@
 {
-  presets: ['es2015'],
-  plugins: ['transform-runtime']
-}
+  presets: [
+    ['env', {
+      modules: false,
+      targets: {
+        browsers: [
+          '> 1%',
+          'last 1 versions',
+          'last 4 Android versions',
+          'last 3 iOS versions'
+        ]
+      }
+    }],
+    'stage-2'
+  ],
+  plugins: ['transform-runtime'],
+  env: {
+    test: {
+      presets: ['env', 'stage-2'],
+      plugins: ['istanbul']
+    }
+  }
+}
diff --git a/.eslintignore b/.eslintignore
@@ -1,5 +1,3 @@
-/node_modules/
 /karma.conf.js
 /webpack.config.js
-/dist/
-/example/
+/dist/*.js
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -0,0 +1,24 @@
+---
+  root: true
+  extends: airbnb-base
+  parser: babel-eslint
+  parserOptions:
+    ecmaVersion: 6
+    sourceType: module
+    ecmaFeatures:
+      impliedStrict: true
+  env:
+    browser: true
+  plugins:
+    - html
+  settings:
+    import/resolver:
+      webpack:
+        config: ./webpack.config.js
+  rules:
+    import/extensions:
+      - error
+      - always
+      -
+        js: never
+        vue: never
diff --git a/example/index.html b/example/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>vue-infinite-loading</title>
-  <script src="../node_modules/vue/dist/vue.min.js"></script>
+  <script src="../node_modules/vue/dist/vue.js"></script>
   <script src="../dist/vue-infinite-loading.js"></script>
   <style>
     body{
diff --git a/karma.conf.js b/karma.conf.js
@@ -1,37 +1,19 @@
-var webpackConfig = require('./webpack.config');
-delete webpackConfig.entry;
-
-// Add code coverage loader
-webpackConfig.vue = {
-  loaders: {
-    js: 'isparta'
-  }
-}
+const path = require('path');
+const webpackConfig = require('./webpack.config');
 
-// remove eslint
-delete webpackConfig.module.preLoaders;
+delete webpackConfig.entry;
 
 // Karma configuration
 module.exports = function(config) {
   config.set({
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
     frameworks: ['mocha', 'chai'],
-    // list of files / patterns to load in the browser
     files: [
       './test/unit/index.js'
     ],
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
       './test/unit/index.js': 'webpack'
     },
-    // start these browsers
-    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
     browsers: ['PhantomJS'],
-    // test results reporter to use
-    // possible values: 'dots', 'progress'
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
     reporters: ['spec', 'coverage'],
     coverageReporter: {
       dir: './test/unit/coverage',
@@ -43,6 +25,7 @@ module.exports = function(config) {
     webpack: webpackConfig,
     webpackMiddleware: {
       noInfo: true
-    }
+    },
+    singleRun: true
   });
 }
diff --git a/package.json b/package.json
@@ -12,10 +12,10 @@
     "email": "scdzwyxst@gmail.com"
   },
   "scripts": {
-    "dev": "webpack-dev-server --inline --hot --quiet --port=8000",
-    "build": "NODE_ENV=production webpack --progress --hide-modules",
-    "test": "karma start --single-run",
-    "lint": "eslint './src/**(vue|js)'",
+    "dev": "webpack-dev-server --hot --info=false --port 8000",
+    "build": "NODE_ENV=production webpack -p --progress --hide-modules",
+    "lint": "eslint --ext .js,.vue src",
+    "test": "BABEL_ENV=test karma start",
     "release": "bash ./release.sh"
   },
   "keywords": [
@@ -34,49 +34,55 @@
   },
   "homepage": "https://github.com/PeachScript/vue-infinite-loading",
   "devDependencies": {
-    "babel-core": "^6.7.7",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-runtime": "^6.7.5",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-runtime": "^6.0.0",
-    "chai": "^3.5.0",
-    "css-loader": "^0.23.1",
-    "eslint": "^3.3.1",
-    "eslint-config-airbnb-base": "^5.0.2",
-    "eslint-loader": "^1.3.0",
-    "eslint-plugin-html": "^1.4.0",
-    "eslint-plugin-import": "^1.6.1",
-    "file-loader": "^0.9.0",
-    "html-webpack-plugin": "^2.16.0",
-    "isparta-loader": "^2.0.0",
-    "karma": "^1.2.0",
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.25.0",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-istanbul": "^4.1.4",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "chai": "^4.1.1",
+    "css-loader": "^0.28.4",
+    "eslint": "^4.4.1",
+    "eslint-config-airbnb-base": "^11.3.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-import-resolver-webpack": "^0.8.3",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-html": "^3.2.0",
+    "eslint-plugin-import": "^2.7.0",
+    "html-webpack-plugin": "^2.30.1",
+    "karma": "^1.7.0",
     "karma-chai": "^0.1.0",
-    "karma-coverage": "^1.0.0",
-    "karma-mocha": "^1.0.1",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^1.7.0",
-    "less": "^2.6.1",
-    "less-loader": "^2.2.3",
-    "mocha": "^3.0.2",
-    "phantomjs-prebuilt": "^2.1.7",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-spec-reporter": "0.0.31",
+    "karma-webpack": "^2.0.4",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.5",
+    "mocha": "^3.5.0",
+    "phantomjs-prebuilt": "^2.1.15",
     "pre-commit": "^1.2.2",
-    "style-loader": "^0.13.1",
-    "url-loader": "^0.5.7",
+    "style-loader": "^0.18.2",
+    "uglifyjs-webpack-plugin": "^0.4.6",
     "vue": "^2.2.0",
-    "vue-hot-reload-api": "^1.3.3",
-    "vue-html-loader": "^1.2.2",
-    "vue-loader": "^10.0.0",
-    "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.2.0",
-    "webpack": "^1.13.0",
-    "webpack-dev-server": "^1.14.1"
+    "vue-loader": "^13.0.4",
+    "vue-template-compiler": "^2.4.2",
+    "webpack": "^3.5.4",
+    "webpack-dev-server": "^2.7.1"
   },
   "peerDependencies": {
     "vue": "^2.2.0"
   },
   "license": "MIT",
   "pre-commit": [
     "lint"
+  ],
+  "browserslist": [
+    "> 1%",
+    "last 1 versions",
+    "last 4 Android versions",
+    "last 3 iOS versions"
   ]
 }
diff --git a/src/.eslintrc.json b/src/.eslintrc.json
diff --git a/src/components/InfiniteLoading.vue b/src/components/InfiniteLoading.vue
@@ -53,8 +53,8 @@
     } else {
       const infiniteElmOffsetTopFromBottom = infiniteElm.getBoundingClientRect().top;
       const scrollElmOffsetTopFromBottom = scrollElm === window ?
-                                           window.innerHeight :
-                                           scrollElm.getBoundingClientRect().bottom;
+        window.innerHeight :
+        scrollElm.getBoundingClientRect().bottom;
 
       distance = infiniteElmOffsetTopFromBottom - scrollElmOffsetTopFromBottom;
     }
diff --git a/test/unit/.eslintrc.json b/test/unit/.eslintrc.json
diff --git a/test/unit/.eslintrc.yml b/test/unit/.eslintrc.yml
@@ -0,0 +1,7 @@
+---
+  env:
+    mocha: true
+  globals:
+    expect: true
+  rules:
+    no-unused-expressions: 0
diff --git a/test/unit/index.js b/test/unit/index.js
@@ -1,5 +1,5 @@
 const testsContext = require.context('./specs', true, /\.spec$/);
 testsContext.keys().forEach(testsContext);
 
-const srcContext = require.context('../../src/', true, /^\.\/(?!main(\.js)?$)/);
+const srcContext = require.context('../../src', true, /^\/(?!index(\.js)?$)/);
 srcContext.keys().forEach(srcContext);
diff --git a/test/unit/specs/InfiniteLoading.spec.js b/test/unit/specs/InfiniteLoading.spec.js
@@ -1,6 +1,8 @@
-import Vue from 'vue/dist/vue.common.js';
+import Vue from 'vue/dist/vue.common';
 import InfiniteLoading from '../../../src/components/InfiniteLoading';
 
+Vue.config.productionTip = false;
+
 function isShow(elm) {
   const styles = getComputedStyle(elm);
 
@@ -64,13 +66,17 @@ describe('InfiniteLoading.vue', () => {
      * because of call the $destroy method of parent cannot trigger
      * destroy event for child component in Vue.js 2.0.0-rc6
      */
-    vm.$refs.infiniteLoading && vm.$refs.infiniteLoading.$destroy();
+    if (vm.$refs.infiniteLoading) {
+      vm.$refs.infiniteLoading.$destroy();
+    }
     vm.$destroy(true);
     /**
      * because of pass true as the argument for destroy method cannot
      * remove element from DOM in Vue.js 2.0.0-rc6
      */
-    vm.$el && vm.$el.remove();
+    if (vm.$el) {
+      vm.$el.remove();
+    }
   });
 
   it('should render a basic template', (done) => {
@@ -98,7 +104,7 @@ describe('InfiniteLoading.vue', () => {
       const len = this.list.length + 1;
       const infiniteWrapper = this.$refs.infiniteLoading.scrollParent;
 
-      for (let i = len; i < len + 20; i++) {
+      for (let i = len; i < len + 20; i += 1) {
         this.list.push(i);
       }
 
@@ -164,7 +170,8 @@ describe('InfiniteLoading.vue', () => {
 
     vm.onInfinite = function test() {
       setTimeout(() => {
-        this.list.push(++i);
+        i += 1;
+        this.list.push(i);
         this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
         clearTimeout(timer);
         timer = setTimeout(() => {
@@ -183,11 +190,13 @@ describe('InfiniteLoading.vue', () => {
   it('should reset component and call onInfinite again', (done) => {
     let callCount = 0;
     vm.onInfinite = function test() {
-      if (!callCount++) {
+      if (!callCount) {
         this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
       } else {
         done();
       }
+
+      callCount += 1;
     }.bind(vm);
 
     vm.$mount('#app');
@@ -239,15 +248,17 @@ describe('InfiniteLoading.vue', () => {
       components: initConf.components,
       methods: {
         onInfinite() {
-          callCount++;
+          callCount += 1;
           if (callCount === 1) {
             this.$parent.currentView = null;
             Vue.nextTick(() => {
               this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
               setTimeout(() => {
                 expect(callCount).to.equal(1);
                 app.$destroy(true);
-                app.$el && app.$el.remove();
+                if (app.$el) {
+                  app.$el.remove();
+                }
                 done();
               }, 1000);
             });
diff --git a/webpack.config.js b/webpack.config.js
