前端开发工作流

参考文档

• Modern JavaScript Explained For Dinosaurs
• The Hitchhiker's guide to the modern front end development workflow

创建新项目

基本

npm init

这个命令会问一些基本问题，并新建一个package.json文件

{
  "name": "MyProject",
  "version": "1.0.0",
  "description": "Great stuff",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "bootstrap"
  ],
  "author": "Ken",
  "license": "ISC"
}

用yeoman, FountainJS创建项目

安装yeoman, FountainJS

npm install yeoman generator-fountain-webapp gulp --global

生成项目框架

yo fountain-webapp

运行

npm run serve

创建React 项目

npm install create-react-app --global
create-react-app my-app

用webpack打包JS模块

Browserify 流行过一段时间，Webpack是现在的主流。

The most popular module bundler was Browserify, which was released in 2011 and pioneered the usage of node.js style require statements on the frontend (which is essentially what enabled npm to become the frontend package manager of choice). Around 2015, webpack eventually became the more widely used module bundler (fueled by the popularity of the Reactfrontend framework, which took full advantage of webpack’s various features).

安装webpack

npm install webpack webpack-cli --global

新建webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
};

运行webpack

webpack
# alternative cmd:
webpack index.js -o bundle.js

使用babel代码转译

安装babel

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

更新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: ['env']
          }
        }
      }
    ]
  }
};

npm script 任务

In 2013, Grunt was the most popular frontend task runner, with Gulp following shortly after. Both rely on plugins that wrap other command line tools. Nowadays the most popular choice seems to be using the scripting capabilities built into the npm package manager itself

更新package.json

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --progress -p",
    "watch": "webpack --progress --watch"
  },
...

执行任务

npm run build
# or
npm run watch

webpack-dev-server

安装

npm install webpack-dev-server --global

更新package.json

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --progress -p",
    "watch": "webpack --progress --watch",
    "server": "webpack-dev-server --open"
  },
...

执行任务

npm run server

yeoman

THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS

fountain.js

Fountain is a new Yeoman generator allowing the user to choose the most structurant technologies you'll use

browsersync

PhantomJS

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.