danevans/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Getting up and running in JavaScript

Prerequisites


Install yarn
Install node

Steps


yarn init

Use yarn init -y to skip all the questions and use defaults.


yarn add webpack webpack-cli webpack-dev-server --dev

Webpack is the workhorse that bundles all the assets from source to output.
Since version 4 of webpack webpack-cli is required.
The dev server is not necessary but is the easiest way to serve and hot reload pages locally.


yarn add "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env --dev

Babel loader teaches webpack how to use babel to transform ES6 to ES5.
Babel core does the transformations.
Preset env tells it what transformations to perform.


Add the webpack.config.js
Update the package.json to include scripts
Create index.html
Create index.js
yarn run server

Optional


yarn add lit-html
yarn add lit-router
https://github.com/FormidableLabs/webpack-dashboard


## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Example</title>
  <script src="/bundle.js"></script>
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

## index.js
// Import dependencies or other source files like this:
// import { html, render } from 'lit-html';

console.log('hello world');

## package.json
  "scripts": {
    "build": "webpack --progress -p",
    "watch": "webpack --progress --watch",
    "server": "webpack-dev-server --open"
  }

## webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // This serves the same index from subroutes using the dev server if you plan
  // to use window.history as a single page app.
  devServer: {
    historyApiFallback: true
  },
  mode: 'development',
};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>JavaScript Example</title>
	<script src="/bundle.js"></script>
	</head>
	<body>
	<h1>Hello world</h1>
	</body>
	</html>
	// Import dependencies or other source files like this:
	// import { html, render } from 'lit-html';

	console.log('hello world');
	"scripts": {
	"build": "webpack --progress -p",
	"watch": "webpack --progress --watch",
	"server": "webpack-dev-server --open"
	}
	module.exports = {
	entry: './index.js',
	output: {
	filename: 'bundle.js'
	},
	module: {
	rules: [
	{
	test: /\.js$/,
	exclude: /node_modules/,
	use: {
	loader: 'babel-loader',
	options: {
	presets: ['@babel/preset-env']
	}
	}
	}
	]
	},
	// This serves the same index from subroutes using the dev server if you plan
	// to use window.history as a single page app.
	devServer: {
	historyApiFallback: true
	},
	mode: 'development',
	};