build(webpack and babel): added webpack and babel and husky for production build on push

re #79

Author: fabianmoronzirfas

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
       'unobtrusive',
       'eslint:recommended'
         ],
-    plugins: [],
+    plugins: ['babel'],
     env: {
       browser: true,
       node: true,
@@ -25,4 +25,3 @@ module.exports = {
       'no-console': ['off','always']
     }
   };
-  

_config.yml

@@ -42,3 +42,4 @@ exclude:
   - test/
   - assets/js/src/
   - .cache
+  - webpack.config

package-lock.json

@@ -3,15 +3,17 @@
   "version": "0.1.0",
   "description": "the docs for Basil.js",
   "scripts": {
+    "webpack:dev": "webpack --config webpack-config/index.js --env dev --colors --progress --watch",
+    "webpack:prod": "webpack --config webpack-config/index.js --env prod --colors --progress",
+    "jekyll:dev": "bundle exec jekyll serve --livereload --incremental --limit_posts 5",
+    "jekyll:prod": "JEKYLL_ENV=production bundle exec jekyll build",
     "build": "npm run update ; npm run generator",
     "update": "npm run pull-latest-basil ; npm run generate-json",
     "generator": "node .bin/index",
-    "webpack": "webpack",
     "pull-latest-basil": "npm install basiljs/basil.js#develop -D",
     "generate-json": "documentation build ./node_modules/basiljs/basil.js -o ./.bin/api/data.json",
     "docs-json-test": "documentation build .bin/test/index.js -o .bin/test/api.json",
-    "broken-link-check": "blc  --filter-level 2 -r --input http://localhost:4000 > test/report.txt && cat test/report.txt | grep 'BROKEN'",
-    "parcel:watch": "parcel watch -d assets/js/ reference.js"
+    "broken-link-check": "blc  --filter-level 2 -r --input http://localhost:4000 > test/report.txt && cat test/report.txt | grep 'BROKEN'"
   },
   "repository": {
     "type": "git",
@@ -29,14 +31,20 @@
   },
   "homepage": "https://github.com/basiljs/basiljs.github.io#readme",
   "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "babel-loader": "^8.0.4",
     "basiljs": "github:basiljs/basil.js#develop",
     "cz-conventional-changelog": "^2.1.0",
     "documentation": "^6.1.0",
     "eslint": "^5.6.0",
     "eslint-config-unobtrusive": "^1.2.2",
+    "eslint-plugin-babel": "^5.3.0",
     "fs-extra": "^2.0.0",
+    "husky": "^1.2.1",
     "jquery": "^3.3.1",
     "lodash": "^4.17.10",
+    "p5": "^0.7.2",
     "path-exists": "^3.0.0",
     "webpack": "^4.28.0",
     "webpack-cli": "^3.1.2",
@@ -52,5 +60,10 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "husky": {
+    "hooks": {
+      "pre-push": "npm run webpack:prod && npm run jekyll:prod"
+    }
   }
 }

package.json

@@ -6,10 +6,10 @@ const webpack = require('webpack');
 
 module.exports = {
   watch: true,
-  mode: 'production',
+  mode: 'development',
   devtool: 'source-map',
   target:'web',
-  context: path.resolve(__dirname, './'),
+  context: path.resolve(__dirname, '../'),
   entry: {
     reference: './assets/js/src/reference.js',
     main:'./assets/js/src/main.js'
@@ -18,9 +18,16 @@ module.exports = {
     jquery: 'jQuery'
   },
   output: {
-    path: path.resolve(__dirname, './assets/js'),
+    path: path.resolve(__dirname, '../', './assets/js'),
     filename: '[name].bundle.js'
   },
+  module: {
+    rules: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: {
+        presets: ['@babel/preset-env']
+      }}
+    ]
+  },
   // if we want to refernce our css within the js this is the way to go
   // but it seems a bit odd to require('style.css') in a css file.
   // Still - this would add the css to the head of the index.html file

webpack.config.js renamed to webpack-config/dev.js

@@ -0,0 +1 @@
+module.exports = env => require(`./${env}.js`);

webpack-config/index.js

@@ -0,0 +1,37 @@
+const path = require('path');
+// eslint-disable-next-line no-unused-vars
+const webpack = require('webpack');
+// if we want to create a sseparate css file we
+// need this module
+
+module.exports = {
+  watch: false,
+  mode: 'production',
+  devtool: 'source-map',
+  target:'web',
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    reference: './assets/js/src/reference.js',
+    main:'./assets/js/src/main.js'
+  },
+  externals: {
+  },
+  output: {
+    path: path.resolve(__dirname, '../', './assets/js'),
+    filename: '[name].bundle.js'
+  },
+  module: {
+    rules: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: {
+        presets: ['@babel/preset-env']
+      }}
+    ]
+  },
+  optimization: {
+    splitChunks: {
+      chunks: 'all'
+    }
+  },
+  plugins: [
+  ]
+};