大前端工具介绍 | 易学教程

现在移动端各种终端设备崛起，已经超过了 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 导出需要暴露的借口
    1234
    require("module");require("../file.js");exports.doStuff = function() {};module.exports = someValue;
- 具体实现
  - 服务器端的 Node.js
  - Browserify
AMD Asynchronous Module Definition 规范
- 核心思想
  - 只有一个主要接口define(id?， dependencies?， factory)，它要在声明模块的时候指定所有的依赖 dependencies，并且还要当做形参传到 factory 中，对于依赖的模块提前执行，依赖前置
    1234
    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

来源：https://www.cnblogs.com/lijianming180/p/12147674.html

标签

web前端开发

前端

Webpack