前端工程化


前端工程化

为什么要工程化

前端也是一种软件工程,随着网站制作越来越复杂,各种js,css,html文件越来越多,需要提高整个系统生产效率,提高编码、测试、维护阶段的生产效率

工程化概念(WHAT)

工程化即系统化、模块化、规范化的一个过程。

使用前端框架,模块化组织代码

JS 模块化:AMD、CommonJS、UMD、ES6 Module

CSS 模块化:less、sass、stylus、postCSS、css module

解决的问题:解决代码分割、增强维护性、提高代码重用、作用域隔离、

模块之间的依赖管理、发布的自动化打包与处理等多个方面。

使用组件化

处理 UI 层react、vue、angular

将数据层分离管理 redux、vuex

规范化

代码规范 目录结构 编码规范

开发流程规范 敏捷开发 code review 源代码管理 工程化的历史

发展历史

1 不区分前后端

2 后端为主的 MVC 时代

存在的问题

前端开发重度依赖开发环境。

前后端职责依旧纠缠不清,可维护性越来越差。

3 Ajax时代

2005年Ajax正式提出,前端开发进入SPA(Single Page Application 单页面应用)时代

Ajax时代面临的挑战

前后端接口的约定。

前端开发的复杂度控制。SPA应用大多以功能交互型为主,大量 JS 代码的组织,与 View 层的绑定等,都不是容易的事情

4 前端为主的MVC、MV*时代

5 Node 带来的全栈时代

带来的好处

前后端职责很清晰。

前端开发的复杂度可控,通过合理的分层,让项目更可维护。

部署相对独立,产品体验可以快速改进。

自动化工程工具的使用

使用前端构建工具 gulp、grunt、Broccoli

javascript 编译工具 Babel、Browserify、Webpack

开发辅助工具数据 mock、livereload

使用CI集成工具 jenkins、Travis CI

使用脚手架工具 yeoman、create-app

○ 参考

§ https://yq.aliyun.com/articles/574270?utm_content=m_45413

SASS是什么

预处理器是对原生CSS的拓展

https://www.sass.hk/

安装SASS

1、下载安装ruby

2、设置源并安装

gem sources --remove https://rubygems.org/
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem install sass
gem install compass
sass -v
sass -h

使用sass变量

@charset "UTF-8";

$color: #ccc;  //$声明变量

$font-color:rgb(37, 37, 37);

$width: 80px;

$height: 50px;

.box{

    border: 1px solid $color; // 使用变量

    width: $width;

    height: $height;

    display:inline-flex;

    justify-content: center;

    align-items: center;

    color: $font-color;

}

sass demo.scss demo.css 编译scss 到css

sass --watch demo.scss:demo.css 自动编译

变量对中划线和下划线是不敏感的

CSS嵌套

.container {

    border: 2px solid $color;

    .box {

        border: 1px solid $color;

        width: $width;

        height: $height;

        display: inline-flex;

        justify-content: center;

        align-items: center;

        color: $font-color;

        .sp1{

            font-size: 20px;

        }

    }

    .box:last-child{

        border: 1px dashed red;

    }

}

引用父选择器

.link{

    a{

        color:$color;

        text-decoration: none;

        &:hover{  //&引用父选择器

            color:$font-color;

        }

    }

}

文件引用

_global.scss内容

@charset "UTF-8";

$color: #ccc;

$font-color:rgb(37, 37, 37);

$width: 60px;

$height: 50px;

在其他地方使用

@import "global";即可

默认变量值 !default

更多内容 https://www.sass.hk/docs/

gulp的使用

前端工程化必备阶段,构建,优化,压缩,合并,校验

安装gulp

1、下载nonde.js

检测安装 node -v ; npm -v

2、安装gulp

npm install -g gulp

npm install gulp-cli -g

可选 添加cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、进入项目目录

npm init // 初始化

生成 package.json

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "gulp is cool",
  "main": "index.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "dongli",
  "license": "ISC"
}

安装gulp

cnpm install gulp --save-dev

创建gulpfile.js

const gulp = require('gulp');

gulp.task('hello',function(){
    return new Promise((resolve, reject) =>{
       console.log('hello gulp');
        resolve('success!')
    })
})

移动文件

gulp.task('html', function(){
   return gulp.src('src/*.html').pipe(gulp.dest('dest'));
})

编译scss

cnpm install gulp-sass --save-dev  安装插件
const sass = require('gulp-sass');

gulp.task('css', function(){
    return gulp.src('src/sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dest/css'));
})

执行多个任务

gulp.task('default', gulp.series('html', 'scss'));

需要使用gulp.series和gulp.parallel,因为gulp任务现在只有两个参数。
gulp.series:按照顺序执行gulp.paralle:可以并行计算

合并js

安装gulp-concat

cnpm install gulp-concat --save-dev

const concat = require('gulp-concat');

gulp.task('js', function(){
    return gulp.src('src/js/*.js')
    .pipe(concat('dongli.min.js'))
    .pipe(gulp.dest('dest/js'));
})

监视任务

gulp.task('watch', function () {
    gulp.watch('src/*.html', f1 //任务的回调函数);
});

压缩JS

安装gulp-uglify

cnpm install gulp-uglify --save-dev

const uglify = require('gulp-uglify')

gulp.task('js', function(){
    return gulp.src('src/js/*.js')
    .pipe(concat('dongli.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dest/js'));
})

Node.js Npm

例子

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

执行 node app.js

引用其他JS文件

require('文件路径');

导出函数

exports.name = function(){

    const name = 'dongli';
    console.log(name);

}// 导出
const name = require('./index.js');

name.name() // 使用

导出模块

module.exports = function(){

    console.log('dongli hello');

}
const name = require('./index.js');

name()

根据package.json 安装环境

npm install

WebPack

分而治之是软件工程中的重要思想复杂的web系统:多功能、多页面、多状态、多系统模块化是目前前端最流行的分治手段。

作用 打包js,css,image,文件 ,优化和压缩代码,用户获取网站资源更快,体验更好。

和gulp比较:

Gulp侧重于前端开发的整个过程的控制管理(像是流水线)给gulp配置不通的task(通过Gulp中的gulp.task()方法配置,比如启动server、sass/less预编译、文件的合并压缩等等)来让gulp实现不同的功能,从而构建整个前端开发流程。

Webpack有人也称之为模块打包机,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片、js文件、css文件等)都可以看成模块。

最初Webpack本身就是为前端JS代码打包而设计的,后来被扩展到其他资源的打包处理。Webpack是通过loader(加载器)和plugins(插件)对资源进行处理的。

webpack安装

cnpm install webpack --save-dev

cnpm install webpack-cli --save-dev

压缩js文件

创建工程结构

  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

index.html 中引入 src/index.js

index.js中内容为

+ import _ from 'lodash';
+
  function component() {
    var element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
+   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

我们还需要调整 package.json 文件,以便确保我们安装包是私有的(private),并且移除 main 入口。这可以防止意外发布你的代码。

如果你想要了解 package.json 内在机制的更多信息,我们推荐阅读 npm 文档

package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}
  }

因为存在依赖 所以要安装下lodash

npm -i lodash

执行 npx webpack 自动生成main.js

自定义配置压缩JS

新建webpack.config.js

内容:

const path = require('path');

module.exports = {
    mode: "development",
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

执行 npx webpack --config webpack.config.js

package.json 自定义命令

package.json增加

 "scripts": {

    "build":"npx webpack --config webpack.config.js"

  },

执行 npm run build

处理Sass

安装插件

npm install css-loader style-loader sass sass-loader extract-text-webpack-plugin@next node-sass --save-dev

修改配置文件

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    mode: "development",
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'sass-loader']
            })
        }]
    },
    plugins: [
        new ExtractTextPlugin('style.css')
    ]
};

入口文件引入scss文件

import './index.scss';

CSS添加进JS

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    mode: "development",
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
            })
        }]
    },
    plugins: [
        new ExtractTextPlugin('style.css')
    ]
};

处理多个页面

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    mode: "development",
    entry: {
        home: './src/index.js',
        about:'./src/about.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }]
    },
    plugins: [
        new ExtractTextPlugin('style.css')
    ]
};

webpack watch

npx webpack --watch

webpack 开发服务器

安装

cnpm install webpack-dev-server --save-dev

配置文件增加:

devServer:{
        contentBase:path.join(__dirname, 'dist'),
        host:'localhost',
        port:'8888'
    }

执行命令:

npx webpack-dev-server --config webpack.config.js

热加载:

进入

host:端口/页面测试

npx webpack-dev-server --config webpack.config.js --corlor --progress --hot

把命令加入package 进行优化

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack --config webpack.config.js",
    "start": "npx webpack-dev-server --config webpack.config.js --corlor --progress --hot"
  },

最后更新于:2019-04-24 15:20:13