CityRay/Blog

[JS] JS Development Environment

CityRay opened this issue · 0 comments

CityRay commented

Development Webservers

  • Express
  • budo
  • Browsersync
  • Webpack dev server
  • http-server
  • live-server

share work-in-progress

npm Scripts

npm config set init-author-name [yourname]
npm config set init-author-email [your@email.com]
npm config set init-author-url [http://your.url]
npm config set init-license MIT

Bundlers

// webpack example
import path from 'path';

export default {
    debug: true,
    devtool: 'inline-source-map',
    noInfo: false,
    entry: [
        path.resolve(__dirname, 'src/index')
    ],
    target: 'web',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: [],
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] },
            { test: /\.css$/, loaders: ['style', 'css'] }
        ]
    }
}

Linter - ESlint

// .eslintrc.json
{
    "root": true,
    "extends": [
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:import/warnings"
    ],
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module"
    },
    "env": {
        "browser": true,
        "node": true,
        "mocha": true
    },
    "rules": {
        "no-console": 1
    }
}

// command
# eslint --fix xxx.js
# eslint --print-config xxx.js

Disable Eslint

/* eslint-disable semi, xxx, xxx */
or
/* eslint semi: 0 */

Disable Eslint line

// eslint-disable-line semi, no-undef

Testing

Frameworks

Assertion

Run without browser

End-to-End testing

Continuous Integration

  • Travis
  • Jenkins
  • AppVeyor

Http Calls

Mocking

Polyfill

Error Logging(Tracking)

Cloud Hosting

  • AWS
  • Azure
  • Heroku
  • GCP
  • Firebase
  • Github Page (Static files only)

Git

Deploy

Find Start Project