bali182/setup-js-project.md

## setup-js-project.md

      
    Raw
  

              setup-js-project.md
            
          
    Basics


node
npm
IDE - VSCode
command line

Init project


npm init
npm install --save-dev webpack webpack-dev-server
webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js']
  }
}

add to scripts
run it
npm install --save lodash require it, use it

Add to a webpage


create index.html in src

<!DOCTYPE html>
<html>
<head>
  <title>My first webpack app</title>
</head>
<body>
</body>
</html>

npm install --save-dev html-webpack-plugin
plugins: [ new HtmlPlugin({ template: 'src/index.html' }) ]

Transpile


npm install --save-dev babel-core babel-loader babel-preset-es2015

module: {
  loaders: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react'],
        babelrc: false,
      },
    }
  ]
}

change require to import

Linting


npm install --save-dev eslint
add command eslint \"src/**/*.js\" --config .eslintrc
create .eslintrc with empty object
run lint, explain error
npm install --save-dev babel-eslint
"parser": "babel-eslint"
run again, explain no error
"extends": "eslint:recommended"
overriding rules: "rules": { "no-console": "off" }
globals, env