make tree shaking work with babel-preset-env

Author: marcosmoura

.babelrc

@@ -0,0 +1,23 @@
+export default {
+  presets: [
+    [
+      'env',
+      {
+        modules: false,
+        loose: true,
+        useBuiltIns: true,
+        targets: {
+          node: false,
+          browsers: [
+            'last 4 versions',
+            'not IE < 10'
+          ]
+        }
+      }
+    ]
+  ],
+  plugins: [
+    'add-module-exports',
+    'transform-object-rest-spread'
+  ]
+}

babel.js

@@ -1,35 +1,22 @@
 import path from 'path';
+import babelrc from '../babel';
 
 const config = {
+  babelrc,
   projectRoot: path.join(__dirname, '../'),
   rootPath: path.join(__dirname, '../dist'),
   nodePath: path.join(__dirname, '../node_modules'),
   srcPath: 'src',
   docsPath: 'docs',
   indexPath: 'docs/index.html',
   publicPath: '/',
-  assetsPath: 'docs/src/assets'
-};
-
-let dev = {
+  assetsPath: 'docs/src/assets',
+  env: {
+    NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production')
+  },
   server: {
     port: process.env.PORT || '8080'
-  },
-  env: {
-    NODE_ENV: '"development"'
   }
 };
 
-let prod = {
-  env: {
-    NODE_ENV: '"production"'
-  }
-};
-
-if (config.env === 'production') {
-  Object.assign(config, prod);
-} else {
-  Object.assign(config, dev);
-}
-
 export default config;

build/config.js

@@ -28,25 +28,11 @@ export default {
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         enforce: 'pre',
-        include: [
-          resolvePath('build'),
-          resolvePath('src'),
-          resolvePath('docs')
-        ],
         options: {
           fix: true,
           formatter: eslintFormatter
         }
       },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: [
-          resolvePath('build'),
-          resolvePath('src'),
-          resolvePath('docs')
-        ]
-      },
       {
         test: /\.theme$/,
         use: ['raw-loader', 'sass-loader']

build/webpack/base.js

@@ -5,12 +5,14 @@ import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin';
 import baseWebpackConfig from './base';
 import config from '../config';
 
+delete config.babelrc.presets[0][1].modules;
+
 Object.keys(baseWebpackConfig.entry).forEach((name) => {
   baseWebpackConfig.entry[name] = ['./build/server/client', ...[baseWebpackConfig.entry[name]]];
 });
 
 export default merge(baseWebpackConfig, {
-  devtool: '#cheap-module-eval-source-map',
+  devtool: '#eval-source-map',
   module: {
     rules: [
       {
@@ -23,6 +25,12 @@ export default merge(baseWebpackConfig, {
           }
         }
       },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        query: config.babelrc,
+        exclude: /node_modules/
+      },
       {
         test: /\.css$/,
         use: ['vue-style-loader', 'css-loader']
@@ -34,6 +42,10 @@ export default merge(baseWebpackConfig, {
     ]
   },
   plugins: [
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: true
+    }),
     new webpack.WatchIgnorePlugin([config.nodePath]),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),

build/webpack/dev.js

@@ -38,12 +38,18 @@ const conf = merge(baseConfig, {
           },
           postcss: [
             autoprefixer({
-              browsers: ['last 3 versions', 'not IE < 10']
+              browsers: ['last 4 versions', 'not IE < 10']
             }),
             mediaPacker()
           ]
         }
       },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        query: config.babelrc,
+        exclude: /node_modules/
+      },
       {
         test: /\.css$/,
         loader: ExtractTextPlugin.extract({

build/webpack/prod-docs.js

@@ -55,12 +55,18 @@ export default merge(baseConfig, {
           },
           postcss: [
             autoprefixer({
-              browsers: ['last 3 versions', 'not IE < 10']
+              browsers: ['last 4 versions', 'not IE < 10']
             }),
             mediaPacker()
           ]
         }
       },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        query: config.babelrc,
+        exclude: /node_modules/
+      },
       {
         test: /\.css$/,
         loader: ExtractTextPlugin.extract({
@@ -89,7 +95,7 @@ export default merge(baseConfig, {
   plugins: [
     new webpack.LoaderOptionsPlugin({
       minimize: true,
-      debug: false
+      debug: true
     }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {

build/webpack/prod-lib.js

@@ -164,7 +164,6 @@ var App = new Vue({
         this.codeString = JSON.stringify(data).replace(/"/g, '"').replace(/'/g, ''');
 
         this.$nextTick(() => {
-          console.log(this.$refs.initialJs);
           this.$refs.form.submit();
         });
       }

docs/src/components/ExampleBox.vue

@@ -3,7 +3,7 @@
     <div v-if="availableDocs.length > 1">
       <span>Version:</span>
       <md-select id="docs-select" v-model="currentDocs" @change="changeDocs">
-        <md-option v-for="doc in availableDocs" :value="doc">{{ doc }}</md-option>
+        <md-option v-for="doc in availableDocs" :key="doc" :value="doc">{{ doc }}</md-option>
       </md-select>
     </div>
   </div>

docs/src/components/ReleaseVersion.vue

@@ -3,6 +3,7 @@
     <md-input-container @click.native="applyInputFocus">
       <md-chip
         v-for="chip in selectedChips"
+        :key="chip"
         :md-deletable="!mdStatic"
         :md-editable="!mdStatic"
         :disabled="disabled"

src/components/mdChips/mdChips.vue

@@ -47,8 +47,8 @@
               <div class="md-datepicker-days">
                 <span class="md-empty" v-for="day in startOfMonth(month).getDay()" v-once></span>
 
-                <md-button
-                  class="md-icon-button"
+                <button
+                  class="md-button md-icon-button"
                   v-for="day in getDaysInMonth(month)"
                   :key="day"
                   :class="{
@@ -57,15 +57,16 @@
                   }"
                   @click.native="setDate(day)"
                   v-once>
+                  <md-ink-ripple />
                   {{ day }}
-                </md-button>
+                </button>
               </div>
             </div>
           </transition-group>
         </div>
 
         <div class="md-datepicker-years" v-show="currentView === 'year'">
-          <md-button
+          <button
             class="md-dense md-datepicker-year"
             v-for="year in visibleYears()"
             :key="year"
@@ -77,22 +78,24 @@
               'data-' + year
             ]"
             @click.native="setYear(year)">
+            <md-ink-ripple />
             {{ year }}
-          </md-button>
+          </button>
         </div>
 
         <div class="md-datepicker-months" v-show="currentView === 'month'">
-          <md-button
-            class="md-dense md-datepicker-month"
+          <button
+            class="md-button md-dense md-datepicker-month"
             v-for="(month, index) in locale.months"
             :key="month"
             :class="{
               'md-primary': isThisMonth(index),
               'md-primary md-raised': isSelectedMonth(index),
             }"
             @click.native="setMonth(index)">
+            <md-ink-ripple />
             {{ month }}
-          </md-button>
+          </button>
         </div>
 
         <div class="md-datepicker-actions md-dialog-actions">

src/components/mdDatePicker/mdDatePicker.vue

@@ -2,7 +2,7 @@
   <transition name="md-spinner" appear>
     <div class="md-spinner" :class="[themeClass, classes]":style="styles">
       <svg class="md-spinner-draw" viewBox="25 25 50 50">
-        <circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-width="mdStroke" :stroke-dasharray="dashProgress">
+        <circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-width="mdStroke" :stroke-dasharray="dashProgress"></circle>
       </svg>
     </div>
   </transition>

src/components/mdSpinner/mdSpinner.vue

@@ -48,7 +48,7 @@
         };
       },
       realValue() {
-        console.log(this.value);
+        //console.log(this.value);
       }
     },
     methods: {

src/components/mdTable/mdTableEdit.vue

@@ -3,7 +3,7 @@
     <span class="md-table-pagination-label">{{ mdLabel }}:</span>
 
     <md-select v-model="currentSize" md-menu-class="md-pagination-select" @change="changeSize" v-if="mdPageOptions">
-      <md-option v-for="amount in mdPageOptions" :value="amount">{{ amount }}</md-option>
+      <md-option v-for="amount in mdPageOptions" :key="amount" :value="amount">{{ amount }}</md-option>
     </md-select>
 
     <span>{{ ((currentPage - 1) * currentSize) + 1 }}-{{ subTotal }} {{ mdSeparator }} {{ mdTotal }}</span>

src/components/mdTable/mdTablePagination.vue

@@ -7,13 +7,17 @@
 <style lang="scss" src="./mdInkRipple.scss"></style>
 
 <script>
+  import supportsPassiveEvent from '../../utils/supportsPassiveEvent';
+
+  const passiveEvent = supportsPassiveEvent ? { passive: true } : false;
+
   const addEvent = (target, type, handler) => {
     if (type === 'start') {
-      target.addEventListener('mousedown', handler);
-      target.addEventListener('touchstart', handler);
+      target.addEventListener('mousedown', handler, passiveEvent);
+      target.addEventListener('touchstart', handler, passiveEvent);
     } else {
-      target.addEventListener('mouseup', handler);
-      target.addEventListener('touchend', handler);
+      target.addEventListener('mouseup', handler, passiveEvent);
+      target.addEventListener('touchend', handler, passiveEvent);
     }
   };
   const removeEvent = (target, type, handler) => {

src/core/components/mdInkRipple/mdInkRipple.vue

@@ -0,0 +1,15 @@
+let supportsPassive = false;
+
+try {
+  const options = Object.defineProperty({}, 'passive', {
+    get() {
+      supportsPassive = true;
+    }
+  });
+
+  window.addEventListener('test', null, options);
+} catch (error) {
+  throw new Error(error);
+}
+
+export default supportsPassive;