Large front-end tools introduced

Now various mobile end terminal equipment rise, has exceeded the pc side, different devices will inevitably lead to the development of language is not unified, develop more and more difficult, such as making a game, you need to develop several different versions of Android version, IOS version, etc., very waste of human and material resources.

Big front of the times came into being, it appears precisely to solve these difficulties.

About ES6 building project

• Project build step
  1. New project folder (three blocks)
     1. app: front-end code (js, css, html template)
        • js
        • css
        • views
     2. server: server code (server) 一个完整的项目必须要服务器提供接口和真实数据
        • express-generator脚手架
        • express -e .
     3. tasks: the auxiliary code (compiler front-end code and automation)
        • util: placing common gulp automated scripts
          • args.js (Write your own script command-line arguments)
  2. Create the necessary configuration files
     1. package.json (npm install -y)
     2. .babelrc (Support es6 grammar)
     3. gulpfile.babel.js(Because the syntax used in the project es6, so gulp startup file extensions need to be added .babel)
  3. Handling command-line parameters ( args.jscustom parameters script)

Popular frameworks

• Libraries and frameworks
  • Library: Small but no specific norms, based mainly in their own Code
  • Frame: large and mainly in the skeleton code for people to write their own code in this framework, the need to comply with the regulatory framework established by
• MVC
  • An idea, it is simply a way to make up the structure of the code
  • The most critical point is to reduce the degree of coupling
  • Easy to write and maintain the code
  • To facilitate the development team
  • Simplify the complexity of the overall code, organization code division module
  • Agile thinking: greater than the configured agreement, a good agreement with each other as long as the team members will be able to quickly develop
• View
  • Data-driven framework:
    • View of a data driver, as long as the data is modified automatically update the view, the operation does not require DOM
• Task Automation
  • grunt: After belongs to cascade operations, file operations more slowly
  • gulp: file stream operation (stream), fast
• Compilation Tools
  • babel: Compile ES6
  • webpack: Modular project dependencies

JQuery

• Package entry function
  • Jquery entry function may not be used, instead of using DOMContentLoaded

Modular Load

• CommonJS specification

  • main idea

    • It allows the module requireto other modules to be loaded synchronously dependent method, and then by exportsor module.exportsderived needs to be exposed excuse

      1 2 3 4

      require("module"); require("../file.js"); exports.doStuff = function() {}; module.exports = someValue;

  • Implementation

    • Node.js server
    • Browserify
    < Big column   large front-end presentation tool / ul>

  • AMD Asynchronous Module Definitionspecification

    • main idea

      • Only one primary interface define(id?， dependencies?， factory), it is to specify in the statement when the module all the dependencies dependencies, and also as a parameter passed to factory, do in advance for dependent modules, pre-reliance

        1 2 3 4

        define("module"， ["dep1"， "dep2"]， function(d1， d2) { return someExportedValue; }); require(["module"， "../file"]， function(module， file) { });

    • Implementation

      • requireJS

  • CMD Common Module Definitionspecification

    • And AMD is very similar, try to keep it simple, and with Modules CommonJS Node.js and specifications to maintain a great deal of compatibility

      1 2 3 4 5 6

      define(function(require， exports， module) { var $ = require('jquery'); var Spinning = require('./spinning'); exports.doSomething = ... module.exports = ... })

    • Implementation

      • Sea.js
  • Background node.js
    • Dependence require and exports
  • browserify
    • Module loader, but you can only load js
  • webpack
    • Module Loader, all things are modules, including css, pictures, vue file, js etc.
    • Modules are written separately, and finally packaged together

  Webpack

  • webpack configured correctly process.env.NODE_ENV

  1 2 3 4 5

  new webpack.DefinePlugin({ 'process.env'：{ 'NODE_ENV'：JSON.stringify('production') } })

  When you call the following command: indicates a production environment how to use webpack package (Linux environment)

  NODE_ENV=production webpack --progress --colors