大前端工具介绍 其他 2020-01-04 01:34:08 阅读次数: 0

现在移动端各种终端设备崛起，已经超过了 pc 端，设备不同必然导致开发语言不统一，开发越来越困难，比如做一个游戏，需要开发安卓版，IOS 版本等几个不同的版本，非常浪费人力、物力。

大前端时代应运而生，它的出现恰恰解决了这些困难。

关于ES6项目构建

• 项目构建步骤
  1. 新建项目文件夹(三个板块)
     1. app：前端代码(js，css，html 模板)
        • js
        • css
        • views
     2. server：服务器代码(server) 一个完整的项目必须要服务器提供接口和真实数据
        • express-generator脚手架
        • express -e .
     3. tasks：辅助代码(前端代码编译以及自动化)
        • util：放置常见 gulp 自动化脚本
          • args.js (自己编写命令行参数脚本)
  2. 创建必要的配置文件
     1. package.json (npm install -y)
     2. .babelrc (支持es6语法)
     3. gulpfile.babel.js (由于项目中用到es6语法，所以 gulp 的启动文件后缀名需要添加 .babel)
  3. 处理命令行参数 (args.js 自定义参数脚本)

流行框架

• 库和框架
  • 库：小而精，没有具体的规范，主要以自己代码为主
  • 框架：大而全，主要以被人代码为骨架，在这个骨架下写自己的代码，需要遵守框架制定的规范
• MVC
  • 一种思想，其根本是组成代码结构的一种方式
  • 最关键的点是降低耦合度
  • 方便代码编写和维护
  • 便于团队合作开发
  • 简化代码整体复杂度，分模块组织代码
  • 敏捷开发思想：约定大于配置，只要团队成员相互约定好便可以迅速开发
• Vue
  • 数据驱动框架：
    • 数据驱动视图，只要修改了数据就自动更新视图，不需要 DOM 操作
• 任务自动化
  • grunt：属于级联操作，文件多了之后操作慢
  • gulp：文件流操作 (stream)，速度快
• 编译工具
  • babel：编译ES6
  • webpack：模块化项目依赖

JQuery

• 入口函数封装
  • 可以不使用 Jquery 入口函数，利用 DOMContentLoaded 代替

模块化加载

• CommonJS 规范

  • 核心思想

    • 允许模块通过 require 方法来同步加载所要依赖的其他模块，然后通过 exports 或 module.exports 导出需要暴露的借口

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

  • 具体实现

    • 服务器端的 Node.js
    • Browserify
    < 大专栏   大前端工具介绍/ul>

  • AMD Asynchronous Module Definition 规范

    • 核心思想

      • 只有一个主要接口define(id?， dependencies?， factory)，它要在声明模块的时候指定所有的依赖 dependencies，并且还要当做形参传到 factory 中，对于依赖的模块提前执行，依赖前置

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

    • 具体实现

      • requireJS

  • CMD Common Module Definition 规范

    • 和 AMD 很相似，尽量保持简单，并与 CommonJS 和 Node.js 的 Modules 规范保持了很大的兼容性

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

    • 具体实现

      • Sea.js
  • 后台node.js
    • 依赖 require 和 exports
  • browserify
    • 模块加载器，但是只能加载js
  • webpack
    • 模块加载器，一切东西都是模块，包括 css，图片，vue 文件，js 等等
    • 模块都是分开写，最后打包到一块儿

  Webpack

  • webpack 正确配置 process.env.NODE_ENV

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

  调用时按如下命令： 表示生产环境下如何使用 webpack 打包 (Linux环境)

  NODE_ENV=production webpack --progress --colors