feat(babel): added transpilation

babel-env and custom-elements-es5-adapter
PolymerX · Sep 12, 2017 · 544a389 · 544a389
1 parent 2174a3e
commit 544a389
Show file tree

Hide file tree

Showing 5 changed files with 219 additions and 29 deletions.
diff --git a/.yarnrc b/.yarnrc
@@ -1,2 +1 @@
 save-exact true
-save-prefix false
diff --git a/package.json b/package.json
@@ -29,6 +29,8 @@
   },
   "devDependencies": {
     "@polymer/test-fixture": "PolymerX/test-fixture#3.0-preview",
+    "babel-loader": "7.1.2",
+    "babel-preset-env": "1.6.0",
     "chokidar": "1.7.0",
     "clean-webpack-plugin": "0.1.16",
     "copy-webpack-plugin": "4.0.1",

diff --git a/src/index.html b/src/index.html
@@ -49,22 +49,21 @@
       console.log('Service worker is not supported');
     }
   </script>
-  <script src="./vendor/webcomponents-loader.js" async></script>
+  <script src="./vendor/custom-elements-es5-adapter.js"></script>
+  <script src="./vendor/webcomponents-loader.js"></script>
 </head>
 
 <body>
 	<px-app unresolved name="Polymer Skeleton"></px-app>
 
 	<script>
-
 		(function () {
 			var b = document.createElement('script');
 			b.src = '/bundle.js';
 			b.defer = true;
 			document.body.appendChild(b);
 		})();
-
-	</script>
+  </script>
 
 </body>
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -13,11 +13,23 @@ const outputPath = isDev ? resolve('src') : resolve('dist');
  * === Copy static files configuration
  */
 const copyStatics = {
-  copyWebcomponents: {
+  copyWebcomponents: [{
     from: resolve('./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js'),
     to: join(outputPath, 'vendor'),
     flatten: true
-  },
+  }, {
+    from: resolve('./node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js'),
+    to: join(outputPath, 'vendor'),
+    flatten: true
+  }, {
+    from: resolve('./node_modules/@webcomponents/webcomponentsjs/webcomponents-sd-ce.js'),
+    to: join(outputPath, 'vendor'),
+    flatten: true
+  }, {
+    from: resolve('./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'),
+    to: join(outputPath, 'vendor'),
+    flatten: true
+  }],
   copyOthers: [{
     from: resolve('./src/index.html'),
     to: outputPath,
@@ -37,7 +49,7 @@ const copyStatics = {
  * Plugin configuration
  */
 const plugins = isDev ? [
-  new CopyWebpackPlugin([copyStatics.copyWebcomponents])
+  new CopyWebpackPlugin(copyStatics.copyWebcomponents)
 ] : [
   new WorkboxPlugin({
     globDirectory: outputPath,
@@ -61,6 +73,23 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        test: /\.js$/,
+        // We need to transpile Polymer itself and other ES6 code
+        // exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [[
+              'env',
+              {
+                targets: {browsers: ['last 2 versions', 'not ie <= 11']},
+                debug: true
+              }
+            ]]
+          }
+        }
+      },
       {
         test: /\.html$/,
         use: ['text-loader']