資訊專欄INFORMATION COLUMN
摘要：客服系統(tǒng)之前都是用進(jìn)行模塊化編程，并使用相應(yīng)的打包文件，本次遷移成。除了組件化開發(fā)打包發(fā)布，還有性能優(yōu)化工程化管理需要考慮，而并不擅長做這些事情，如等。
客服系統(tǒng)之前都是用Require.js 2.2.0進(jìn)行模塊化編程，并使用相應(yīng)的r.js打包js文件，本次遷移成Webpack3.3.0。
為什么遷移項(xiàng)目前期，require.js可以很好的解決需求，但是隨著項(xiàng)目成長到具有上百個(gè)JS文件，越來越多的工作需要處理。除了組件化開發(fā)、打包發(fā)布，還有性能優(yōu)化、工程化管理需要考慮，而require.js并不擅長做這些事情，如tree shaking, hot reloading, code splitting等。
令一方面現(xiàn)有項(xiàng)目的CSS打包、CSS預(yù)處理、文件合并等自動(dòng)化構(gòu)建也需要借助gulp或者shell腳本等工具實(shí)現(xiàn)，而這些工作，使用更先進(jìn)生產(chǎn)力的webpack就可以全部完成。
Require.js寫法首先需要了解使用require.js的js文件的寫法，baseUrl是默認(rèn)路徑，paths中定義了各個(gè)路徑的別名，然后使用標(biāo)準(zhǔn)的AMD語法引用定義過的模塊。
requirejs.config({
//設(shè)定為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選定某一個(gè)模塊的baseUrl，是基于git repo的dev路徑的;
require(["jquery", "bootstrap", "main/_main"], function( $, bt, _main ){
_main.run();
});
開始遷移
Webpack本身是支持Amd的，所以不需要修改各個(gè)js組件的語法，只需要修改對(duì)應(yīng)入口文件的require.js的配置即可。
修改后如下：
import _main from "main/_main"; _main.run();
相應(yīng)的paths對(duì)應(yīng)到了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"),
},
}
項(xiàng)目中有大量依賴jQuery的第三方庫，所以需要把jQuery暴露到全局中
{
test: /jquery.js/,
use: [{
loader: "expose-loader",
options: "$"
},
{
loader: "expose-loader",
options: "jQuery"
}]
},
總結(jié)
項(xiàng)目使用webpack替換掉原有繁雜的shell腳本打包文件，移除require.js，取得了很好的效果，且方便日常維護(hù)擴(kuò)展。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85215.html
摘要：可維護(hù)性根據(jù)定義，每個(gè)模塊都是獨(dú)立的。良好設(shè)計(jì)的模塊會(huì)盡量與外部的代碼撇清關(guān)系，以便于獨(dú)立對(duì)其進(jìn)行改進(jìn)和維護(hù)。這標(biāo)志模塊化編程正式誕生。的模塊系統(tǒng)，就是參照規(guī)范實(shí)現(xiàn)的。對(duì)象就代表模塊本身。 javascript模塊化及webpack基本介紹 JavaScript 模塊化發(fā)展歷程 什么是模塊化 ? 為什么要做Javascript模塊化? JavaScript 模塊化發(fā)展歷程 什么是模...
摘要：打包出來的代碼快照如下，注意看注釋中的時(shí)序?qū)嶋H上，的處理同相差無幾，只是在定義模塊和引入模塊時(shí)會(huì)去處理標(biāo)識(shí)，從而兼容其在語法上的差異。 前言 隨著 Web 技術(shù)的蓬勃發(fā)展和依賴的基礎(chǔ)設(shè)施日益完善，前端領(lǐng)域逐漸從瀏覽器擴(kuò)展至服務(wù)端（Node.js），桌面端（PC、Android、iOS），乃至于物聯(lián)網(wǎng)設(shè)備（IoT），其中 JavaScript 承載著這些應(yīng)用程序的核心部分，隨著其規(guī)?；?..
摘要：注意此處獲取的數(shù)據(jù)是更新后的數(shù)據(jù)，但是獲取頁面中的元素是更新之前的鉤子函數(shù)說明組件已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于的操作。鉤子函數(shù)說明實(shí)例銷毀 Vue -漸進(jìn)式JavaScript框架 介紹 vue 中文網(wǎng) vue github Vue.js 是一套構(gòu)建用戶界面(UI)的漸進(jìn)式JavaScript框架 庫和框架的區(qū)別 我們所說的前端框架與庫的區(qū)別？ Library 庫，本質(zhì)上是一...
閱讀 2211·2021-09-02 15:11
閱讀 1530·2019-08-30 15:43
閱讀 2083·2019-08-29 13:48
閱讀 2803·2019-08-26 13:55
閱讀 2110·2019-08-23 15:09
閱讀 2905·2019-08-23 14:40
閱讀 3438·2019-08-23 14:23
閱讀 2646·2019-08-23 14:20
