project-init.sh

project-init.sh

# project init

mkdir project-name
cd project-name
touch README.md
mkdir src dist
echo "console.log('hello world')" > src/entry.js
echo '<script src="bundle.js"></script>' > dist/index.html


# git init

git init
ignore node_modules
ignore npm-debug.log
git add -A
git commit -m "git init"


# git init (optional)

TODO: ADD REMOTE
git config user.name "Simon Lang"
git config remote.origin.push HEAD


# npm init

yes '' | yarn init

```
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server",
    "test": "jest",
    "lint": "tslint src/**/*.ts"
  },
```

git add package.json
git commit -m "npm init"


# webpack init

yarn add webpack webpack-dev-server webpack-init
node_modules/.bin/webpack-init
yarn remove webpack-init


```
module.exports = {
  entry: './src/entry.ts',
  output: {
    path: './dist/',
    filename: 'bundle.js',
    publicPath: ''
  },
  devServer: {
    contentBase: "./dist",
  },
  module: {
    loaders: [
      
    ]
  }
}
````

git add -A
git commit -m "webpack init"


# typescript

yarn add typescript ts-loader tslint
# VSCode "Typings Auto Installer", run command "Typings: install definitions for all dependencies"
tsc -init
tslint -init

```
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      }
```

tsconfig.json

```
{
  "compileOnSave": false,
  "buildOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/",
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "noImplicitAny": true,
    "noEmitOnError": true
  },
  "files": [
    "./src/app.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## jest

yarn add jest ts-jest

  "jest": {
    "transform": {
      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]
  }

# react

yarn add react react-dom babel-preset-react

```
import ReactDOM from 'react-dom'
import React from 'react'

class HelloWorld extends React.Component {
  render() {
    return <h1>Hello World!!!</h1>
  }
}

document.addEventListener('DOMContentLoaded', (event) => {
  ReactDOM.render(<HelloWorld />, document.getElementById('mount-point'))
})
```

# es6

yarn add babel-loader babel-core babel-preset-es2015

`eslint --init` or [.eslintrc.json](https://bitbucket.org/simonlang/react-tutorial/raw/9f21dd5fac8987b59de033f435646e0bd7d953e7/.eslintrc.json)

```
      {
        test: /.js?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ['es2015', 'react']
        }
      },
```

# css

yarn add style-loader css-loader

```
      {
        test: /\.css$/,
        loader: 'style!css'
      },
```

# stylus

yarn add stylus stylus-loader

```
      {
        test: /\.styl$/,
        loader: 'style!css!stylus-loader'
      },
```

mkdir -p src/style
echo "body\n  color blue" > src/style/main.styl
echo "\n\nrequire('./style/main.styl')" >> src/entry.js


# makefile


```
build: install
  npm run dist

clean:
  rm -rf dist

test: install
  npm test

lint: install
  npm run lint

dev: install
  npm run dev

install: node_modules

.PHONY: test install lint

node_modules:
  npm install
  touch node_modules
```

convert to tabs


# uglify webpack

const webpack = require('webpack')
const PROD = process.env.PROD_ENV !== 'development

...

plugins: PROD ? [
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false }
    })
  ] : []
  

## libs

https://unpkg.com/[email protected]/dist/css/bootstrap.min.css
https://unpkg.com/[email protected]/angular.js


# check it works

make dev
open http://localhost:8080/webpack-dev-server/