客服系統從Require.js到Webpack

zhangyucha0 發布于2019-08-20 19:09 / 1725人閱讀

摘要：客服系統之前都是用進行模塊化編程，并使用相應的打包文件，本次遷移成。除了組件化開發打包發布，還有性能優化工程化管理需要考慮，而并不擅長做這些事情，如等。

客服系統之前都是用Require.js 2.2.0進行模塊化編程，并使用相應的r.js打包js文件，本次遷移成Webpack3.3.0。

為什么遷移

項目前期，require.js可以很好的解決需求，但是隨著項目成長到具有上百個JS文件，越來越多的工作需要處理。除了組件化開發、打包發布，還有性能優化、工程化管理需要考慮，而require.js并不擅長做這些事情，如tree shaking, hot reloading, code splitting等。

令一方面現有項目的CSS打包、CSS預處理、文件合并等自動化構建也需要借助gulp或者shell腳本等工具實現，而這些工作，使用更先進生產力的webpack就可以全部完成。

Require.js寫法

首先需要了解使用require.js的js文件的寫法，baseUrl是默認路徑，paths中定義了各個路徑的別名，然后使用標準的AMD語法引用定義過的模塊。

requirejs.config({
    //設定為git repo的dev路徑;
    baseUrl: "../../../",
    paths: {
        test: "js/module/test",
        main : "js/module/main",
        model : "js/model",
        view : "js/view",
        api : "js/model",
        artTemplate: "js/3rdParty/artTemplate",
        util: "js/util",
        // "bootstrap" : "http://boss.static.xiaomi.net/common/bootstrap/3.3.4-fix/bootstrap",
        "bootstrap" : "js/3rdParty/bootstrap/3.3.4-fix/bootstrap",
        "jquery" : "http://boss.static.xiaomi.net/common/jquery/1.11.2/jquery",
        "jquery.validate" : "http://boss.static.xiaomi.net/common/jquery.validate/1.13.1/jquery.validate"
    }
});

// 注意:
// require選定某一個模塊的baseUrl，是基于git repo的dev路徑的;
require(["jquery", "bootstrap", "main/_main"], function( $, bt, _main ){
    _main.run();
});

開始遷移

Webpack本身是支持Amd的，所以不需要修改各個js組件的語法，只需要修改對應入口文件的require.js的配置即可。
修改后如下：

import _main from "main/_main";
_main.run();

相應的paths對應到了webpack中的resolve中：

resolve: {
  extensions: [" ", ".js", ".css"],
  modules: [path.join(__dirname, "dev/")],
  alias: {
    test: path.join(__dirname, "dev/js/module/test"),
    main: path.join(__dirname, "dev/js/module/main"),
    libs : path.join(__dirname, "dev/js/3rdParty"),
    model: path.join(__dirname, "dev/js/model"),
    view: path.join(__dirname, "dev/js/view"),
    api: path.join(__dirname, "dev/js/model"),
    artTemplate: path.join(__dirname, "dev/js/3rdParty/artTemplate"),
    util: path.join(__dirname, "dev/js/util"),
    jquery: path.join(__dirname, "dev/js/3rdParty/jquery/1.11.2/jquery"),
    bootstrap: path.join(__dirname, "dev/js/3rdParty/bootstrap/3.3.4-fix/bootstrap"),
    "jquery.validate": path.join(__dirname, "dev/js/3rdParty/jquery.validate/1.13.1/jquery.validate"),
    "datatables.css": path.join(__dirname,"dev/css/3rdparty_libs/datatables/1.10.13/dataTables.bootstrap"),
  },
}

項目中有大量依賴jQuery的第三方庫，所以需要把jQuery暴露到全局中

{
  test: /jquery.js/,
  use: [{
    loader: "expose-loader",
      options: "$"
  },
  {
    loader: "expose-loader",
    options: "jQuery"
  }]
},

總結

項目使用webpack替換掉原有繁雜的shell腳本打包文件，移除require.js，取得了很好的效果，且方便日常維護擴展。

GPU云服務器云服務器從0到1搭建視頻通話系統云計算與分布式系統從并行處理到物聯網 require.js 從域名到網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85215.html

Javascript模塊化及webpack基本介紹

摘要：可維護性根據定義，每個模塊都是獨立的。良好設計的模塊會盡量與外部的代碼撇清關系，以便于獨立對其進行改進和維護。這標志模塊化編程正式誕生。的模塊系統，就是參照規范實現的。對象就代表模塊本身。 javascript模塊化及webpack基本介紹 JavaScript 模塊化發展歷程什么是模塊化 ? 為什么要做Javascript模塊化? JavaScript 模塊化發展歷程什么是模...

figofuture 2019-08-21 18:00 評論0 收藏0
前端模塊化雜記

摘要：入口模塊返回的賦值給總結在剖析了整體的流程之后，可以看到相關的技術細節還是比較清晰的，學無止境引用混合使用詳解的語法前端模塊化規范前言 CMDAMD簡介 Commonjs簡介 Module簡介 Common和Module的區別 Module與webpack Module與Babel 一些問題總結引用前言前端模塊化在近幾年層出不窮，有Node的CommonJs,也有屬于cl...

GitCafe 2019-08-26 13:29 評論0 收藏0
Javascript 模塊化指北

摘要：打包出來的代碼快照如下，注意看注釋中的時序實際上，的處理同相差無幾，只是在定義模塊和引入模塊時會去處理標識，從而兼容其在語法上的差異。前言隨著 Web 技術的蓬勃發展和依賴的基礎設施日益完善，前端領域逐漸從瀏覽器擴展至服務端（Node.js），桌面端（PC、Android、iOS），乃至于物聯網設備（IoT），其中 JavaScript 承載著這些應用程序的核心部分，隨著其規模化和...

enali 2019-08-23 11:44 評論0 收藏0
vue開發看這篇文章就夠了

摘要：注意此處獲取的數據是更新后的數據，但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新，所以你現在可以執行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架庫和框架的區別我們所說的前端框架與庫的區別？ Library 庫，本質上是一...

fsmStudy 2019-08-21 18:37 評論0 收藏0