Add babel loader on webpack-stream to transpile es6 code

gabrielhsp · Feb 13, 2018 · d344624 · d344624
1 parent 4de2eda
commit d344624
Show file tree

Hide file tree

Showing 9 changed files with 705 additions and 7 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,17 @@
+{
+	"presets": [
+		[
+			"env",
+			{
+				"modules": false,
+				"useBuiltIns": true,
+				"targets": {
+					"browsers": [
+						"> 5%",
+						"IE >= 11"
+					]
+				}
+			}
+		]
+	]
+}
diff --git a/build/bundle.min.js b/build/bundle.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -70,6 +70,16 @@ gulp.task('scripts', () => {
 				modules: ['src/scripts', 'node_modules']
 			},
 
+			module: {
+				loaders: [
+					{
+						test: /\.js$/,
+						use: 'babel-loader',
+						exclude: /node_modules/
+					}
+				]
+			},
+
 			plugins: [
 				new webpack.webpack.DefinePlugin({
 					VERSION: JSON.stringify(pkg.version)

diff --git a/index.php b/index.php
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>A simple demo page</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<header class="header">
+		<div class="container">
+			<nav class="menu">
+				<ul class="menu-list">
+					<li class="menu-item"><a href="#" class="menu-link">Lorem 01</a></li>
+					<li class="menu-item"><a href="#" class="menu-link">Lorem 02</a></li>
+					<li class="menu-item"><a href="#" class="menu-link">Lorem 03</a></li>
+					<li class="menu-item"><a href="#" class="menu-link">Lorem 04</a></li>
+					<li class="menu-item"><a href="#" class="menu-link">Lorem 05</a></li>
+					<li class="menu-item"><a href="#" class="menu-link">Lorem 06</a></li>
+					<li class="menu-item"><a href="#" class="menu-link">Lorem 07</a></li>
+					<li class="menu-item"><a href="#" class="menu-link">Lorem 08</a></li>
+					<li class="menu-item"><a href="#" class="menu-link">Lorem 09</a></li>
+					<li class="menu-item"><a href="#" class="menu-link">Lorem 010</a></li>
+				</ul>
+			</nav>
+		</div>
+	</header>
+
+	<script src="build/bundle.min.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -7,6 +7,9 @@
 	"license": "MIT",
 	"dependencies": {
 		"autoprefixer": "^7.2.2",
+		"babel-core": "^6.26.0",
+		"babel-loader": "^7.1.2",
+		"babel-preset-env": "^1.6.1",
 		"browser-sync": "^2.23.5",
 		"css-mqpacker": "^6.0.1",
 		"cssnano": "^3.10.0",

diff --git a/src/scripts/bundle.js b/src/scripts/bundle.js
@@ -0,0 +1 @@
+'use strict';
diff --git a/src/styles/style.scss b/src/styles/style.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+body {
+	border: none;
+	background-color: red;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,9 @@
+/*
+ * Theme Name: my_project
+ * Author: Author's name here
+ * Author URI: http://www.yourwebsite.com
+ * Description: Your project description here
+ * Version: 1.0.0
+*/
+
+body{border:none;background-color:red}