碼上快樂

相關內容    簡體    繁體

前端工程化淺學

本文轉載自   查看原文   2020-04-19 11:20   587    前端

前端工程化

為什么要工程化

前端也是一種軟件工程，隨着網站制作越來越復雜，各種js，css，html文件越來越多，需要提高整個系統生產效率，提高編碼、測試、維護階段的生產效率。

前端工程化概念

工程化即系統化、模塊化、規范化的一個過程。

使用前端框架，模塊化組織代碼

  • JS 模塊化：AMD、CommonJS、UMD、ES6 Module
  • CSS 模塊化：less、sass、stylus、postCSS、css module
  • 解決的問題：解決代碼分割、增強維護性、提高代碼重用、作用域隔離、模塊之間的依賴管理、發布的自動化打包與處理等多個方面。

使用組件化

  • 處理 UI 層react、vue、angular
  • 將數據層分離管理 redux、vuex

規范化

  • 代碼規范：目錄結構、編碼規范
  • 開發流程規范：敏捷開發、code review、源代碼管理、工程化的歷史

發展歷史

  1. 不區分前后端

  1. 后端為主的 MVC 時代
  • 前端開發重度依賴開發環境。
  • 前后端職責依舊糾纏不清，可維護性越來越差。

  1. Ajax時代
  • 前后端接口的約定。
  • 前端開發的復雜度控制。SPA應用大多以功能交互型為主，大量 JS 代碼的組織，與 View 層的綁定等，都不是容易的事情

  1. 前端為主的 MVC、MV* 時代

  1. 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

Sass是一個將腳本解析成CSS的腳本語言，即SassScript。
SASS中文網：https://www.sass.hk/

安裝

  1. 安裝Ruby
  • 一種簡單快捷的面向對象（面向對象程序設計）腳本語言。
  • sass基於Ruby語言開發而成，因此安裝sass前需要安裝Ruby。（注:mac下自帶Ruby無需在安裝Ruby!）
    下載網址：https://rubyinstaller.org/downloads/
  1. 設置源並安裝
// 刪除替換原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
// 安裝Sass和Compass
gem install sass
gem install compass
// 查看sass版本和幫助
sass -v
sass -h

使用sass變量

  • sass demo.scss demo.css //編譯scss到css
  • sass --watch demo.scss:demo.css //自動編譯
  • 變量對中划線和下划線是不敏感的
@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;
}

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;
    }
}

引用父選擇器

    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

Gulp

前端工程化必備階段，構建，優化，壓縮，合並，校驗
官方網站：https://gulpjs.com/

安裝

  1. 下載nonde.js
    地址：https://nodejs.org/zh-cn/download/
    檢測安裝 node -v ； npm -v

  2. 安裝gulp

// 全局安裝gulp
npm install gulp-cli -g
// 使用gulp的項目中單獨安裝
npm install -g gulp
// 添加cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
  1. 進入項目目錄

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": "Riy",
  "license": "ISC"
}

安裝gulp

cnpm install gulp --save-dev

使用gulp

可以自己起一個任務名，運行的時候，直接在命令行輸入gulp 任務名，gulp也給我們定義了一個默認任務名default,如果任務名為
default,直接在命令行輸入gulp即可。

// 先引入包
const gulp = require('gulp')   //這個每次都要引入，在你使用插件的時候
const less = require('gulp-less')

// 定義任務對less進行轉換,myless是你自己定義的任務名
gulp.task('myless', function() {
  // 1.匹配到要處理的文件，目錄src/less/*.less下的所有后綴名為`.less`的所有文件
  gulp.src('src/less/*.less')
    // 2.對less語法進行轉換!
    .pipe(less())
    // 3.指定文件的輸出目錄dist/css
    .pipe(gulp.dest('dist/css'))
})

gulp常用的插件

移動文件

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

編譯scss

安裝插件: cnpm install gulp-sass --save-dev

const less = require('gulp-less')

// 定義任務對less進行轉換,myless是你自己定義的任務名
gulp.task('myless', function() {
  // 1.匹配到要處理的文件，目錄src/less/*.less下的所有后綴名為`.less`的所有文件
  gulp.src('src/less/*.less')
    // 2.對less語法進行轉換!
    .pipe(less())
    // 3.指定文件的輸出目錄dist/css
    .pipe(gulp.dest('dist/css'))
})

執行多個任務

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

合並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 進行壓縮

安裝插件：npm install gulp-uglify --save-dev

const uglify = require('gulp-uglify')

// 對js請求進行壓縮和混淆
// 定義任務
gulp.task('myscript', function() {
  // 1.匹配要處理的文件
  gulp.src('src/js/*.js')
      // 2.將js代碼壓縮混淆
       .pipe(uglify())
       .pipe(gulp.dest('dist/js'))
})

對html代碼進行壓縮

安裝插件：npm install gulp-htmlmin --save-dev

// 對html進行壓縮的包
const htmlmin = require('gulp-htmlmin')

// 對html進行壓縮
// 定義任務
gulp.task('myhtml', function(){
   // 1.匹配到要處理的html文件
   gulp.src('src/*.html')
        // 2.對html進行壓縮!
        .pipe(htmlmin({
          collapseWhitespace:true // 去除空白符
          }))
          // 3.輸出
        .pipe(gulp.dest('dist'))
})

對css進行壓縮

安裝插件： npm install gulp-cssnano --save-dev

const cssnano = require('gulp-cssnano')


// 定義任務
gulp.task('mycss', function(){
     // 1.
     gulp.src('src/css/*.css')
     .pipe(cssnano())// 消化，轉換，壓縮
     .pipe(gulp.dest('dist/css'))
})

Node.js

概念

  • 簡單的說 Node.js 就是運行在服務端的 JavaScript。
  • Node.js 是一個基於Chrome JavaScript 運行時建立的一個平台。
  • Node.js是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好。
    官網：https://nodejs.org/zh-cn/

例子

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()

WebPack

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。
WebPack中文網：https://www.webpackjs.com/

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（插件）對資源進行處理的。

安裝

cnpm install webpack --save-dev
cnpm install webpack-cli --save-dev

工程結構

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

最后

如今已經不是 HTML、CSS、JS 前端三劍客仗劍走天下的時代了，前端工程化將越來越重要，工程化學習是前端工程師必不可少的一塊，筆者主要方向非前端，工程化暫做了解，后期有機會再深入學習。文章中的官方學習網站已標注，希望深學的同學可以移步官方。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 論前端工程化 前端為什么要工程化？ 前端工程化 前端工程化 淺談前端工程化 什么是前端工程化？如何實現前端工程化？ 「前端工程化」該怎么理解？ 前端工程化—部署 淺析前端工程化 前端工程化-構建
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM