摘要:這里是打包篇使用的是的進(jìn)行打包思路是通過(guò)里面的進(jìn)行項(xiàng)目的初打包因?yàn)楹屠锩娴囊檬莿?dòng)態(tài)生成的所以無(wú)法對(duì)其進(jìn)行處理這里我們用到了來(lái)進(jìn)行文件整合具體看代碼這里是通過(guò)配置文件來(lái)組裝配置信息對(duì)設(shè)置了同步的模板進(jìn)行打包這里是通過(guò)
這里是打包篇
使用的是requirejs的r.js進(jìn)行打包
思路是,通過(guò)entrance.js里面的require.config進(jìn)行項(xiàng)目的初打包
因?yàn)閞outer.js和store.js里面的引用是動(dòng)態(tài)生成的,所以r.js無(wú)法對(duì)其進(jìn)行處理,這里我們用到了nodejs來(lái)進(jìn)行文件整合
具體看代碼
node2build.js
var fs = require("fs") var cp = require("child_process") var __config__ = require("./../dist/config") var fromdir = (process.argv.length >= 3 ? process.argv[2] ? process.argv[2] : "" : "dist") var todir = (process.argv.length >= 4 ? process.argv[3] ? process.argv[3] : "" : "pack") var base = { appDir: "../" + fromdir, baseUrl: "./", dir: "../" + todir, // fileExclusionRegExp: "^*.less$", removeCombined: true, optimize: "uglify2", // uglify: { ascii_only: true, beautify: true, preserveComments: false }, // uglify2: { output: { ascii_only: true, beautify: false, comments: // false } }, optimizeCss: "standard", // "standard", paths: { "libs": "libs", "vue": "libs/vue/vue", "vuex": "libs/vuex/vuex", "vue-router": "libs/vue-router/vue-router", "vue-popup": "libs/vue-popup/index", "jquery": "libs/jquery/jquery", "fastclick": "libs/fastclick/fastclick", "wind-dom": "libs/wind-dom/index", "__module__": "common/__module__", "__component__": "common/__component__", "__install__": "common/__install__", "__store__factory__": "common/__store__factory__", "detector": "common/detector", "calc": "common/calculate", "emitter": "common/mixins/emitter", "clickoutside": "common/utils/clickoutside", "isvisible": "common/utils/isvisible", "install": "components/install" }, map: { "*": { "text": "libs/require-text/text" } }, modules: [ { name: "entrance", include: [ "__module__", "__store__factory__", "libs/es6-promise/promise", "jquery", "vue", "vue-router", "detector", "calc", "fastclick", "libs/require-text/text", "store/transition" ], exclude: ["store/index", "router/index"] } ] } // 這里是通過(guò)配置文件來(lái)組裝配置信息對(duì)設(shè)置了同步的模板進(jìn)行打包 base.modules[0].include = base .modules[0] .include .concat(__config__.modules.filter(o => o.store).map(o => { return "store/modules/" + o.path + "/store" })) base.modules[0].include = base .modules[0] .include .concat(__config__.modules.filter(o => o.sync).map(o => { return "business/" + o.path + "/index" })) base.modules[0].include = base .modules[0] .include .concat(__config__.modules.filter(o => o.sync).map(o => { return "libs/require-text/text!business/" + o.path + "/tpl.html" })) fs.writeFileSync("build/b.js", "(" + JSON.stringify(base) + ")") var spawn = cp.spawn var exec = cp.exec //這里是通過(guò)控件臺(tái)執(zhí)行r.js的打包命令 node2build = spawn("node", ["node_modules/requirejs/bin/r.js", "-o", "build/b.js"]) node2build .stdout .on("data", function (data) { console.log("" + data) }) node2build .stderr .on("data", function (data) { console.log("" + data) }) //這里是控制臺(tái)執(zhí)行完成后進(jìn)行的文件合并處理 node2build.on("exit", function (code, signal) { fs.unlinkSync("build/b.js") // 合并代碼 var entrance = fs.readFileSync(todir + "/entrance.js", "utf-8") var router = fs.readFileSync(todir + "/router/index.js", "utf-8") router = router.replace(/(define()(e,function)/, "$1"router/index",$2") var store = fs.readFileSync(todir + "/store/index.js", "utf-8") store = store.replace(/(define()(e,function)/, "$1"store/index",$2") //合并router和store entrance = entrance.replace(/(define([""]application[""])/, router + store + "$1") //將配置文件放在文件頭處 var config = fs.readFileSync(todir + "/config.js", "utf-8") entrance = config + entrance //刪除多說(shuō)的文件 exec("rm -rf " + todir + "/store") exec("rm -rf " + todir + "/router") exec("rm -rf " + todir + "/components") exec("rm " + todir + "/build.txt") exec("rm " + todir + "/config.js") fs.writeFileSync(todir + "/entrance.js", entrance) // 處理html刪除config.js的引入 var html = fs.readFileSync(todir + "/index.html", "utf-8") html = html.replace(" ", "") fs.writeFileSync(todir + "/index.html", html) console.log(`打包完成 (返回碼 : ${code})`) })
如果有什么問(wèn)題可以留言質(zhì)詢,覺(jué)得有用就收藏吧
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/83034.html
摘要:項(xiàng)目截圖項(xiàng)目演示地址該項(xiàng)目主要是解決如何讓不了解前端構(gòu)建,并負(fù)責(zé)大部分業(yè)務(wù)邏輯的后端開(kāi)發(fā)出一個(gè)單頁(yè)應(yīng)用覺(jué)得有用請(qǐng)給個(gè)推薦,謝謝最近做了一次小更新配置文件可以配置模塊是否異步加載以及是否關(guān)聯(lián)開(kāi)發(fā)背景公司推進(jìn)手機(jī)端項(xiàng)目,但目前開(kāi)發(fā)模式依舊是后端 項(xiàng)目截圖 項(xiàng)目演示地址 該項(xiàng)目主要是解決: 如何讓不了解前端構(gòu)建,并負(fù)責(zé)大部分業(yè)務(wù)邏輯的后端 開(kāi)發(fā)出 一個(gè)單頁(yè)應(yīng)用 覺(jué)得有用請(qǐng)給個(gè)推薦,謝謝 最近...
摘要:減少服務(wù)器的請(qǐng)求對(duì)于和這兩個(gè)特殊寫發(fā)的文件因?yàn)榈拇虬蛔R(shí)別,要進(jìn)行特殊處理 上一節(jié)提完了構(gòu)思和大體實(shí)現(xiàn)下面來(lái)看具體的 配置文件config 配置文件主要是是用來(lái)讓后端開(kāi)發(fā)自主添加頁(yè)面,并通過(guò)該配置生成route和加載對(duì)應(yīng)的store,這樣就省去了后端去了解vue-router和vuex的用法了; 配置文件格式如下 這里采用umd格式開(kāi)頭是為了后續(xù)nodejs進(jìn)行調(diào)用 (function...
摘要:特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多,可以很快搞定,沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補(bǔ)充。有錯(cuò)誤的地方,還請(qǐng)斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會(huì)及時(shí)更新,平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...
摘要:是目前唯一一個(gè)支持同步調(diào)用的跨平臺(tái)年度上最多的個(gè)項(xiàng)目前端掘金年接近尾聲,在最近的幾篇文章中,會(huì)整理總結(jié)一些年度開(kāi)源項(xiàng)目。 JS 全棧教程 - 前端 - 掘金本課程是基于阮一峰的 js 全棧教程的視頻版本,免費(fèi)供大家觀看... 2016 年 10 個(gè)最佳的 CodePen 作品 - 前端 - 掘金說(shuō)到 CodePen,前端開(kāi)發(fā)者們肯定不會(huì)陌生。如果說(shuō) Dribbble 是設(shè)計(jì)師們聚集的圣...
摘要:哪吒別人的看法都是狗屁,你是誰(shuí)只有你自己說(shuō)了才算,這是爹教我的道理。哪吒去他個(gè)鳥命我命由我,不由天是魔是仙,我自己決定哪吒白白搭上一條人命,你傻不傻敖丙不傻誰(shuí)和你做朋友太乙真人人是否能夠改變命運(yùn),我不曉得。我只曉得,不認(rèn)命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...
閱讀 3110·2021-11-10 11:36
閱讀 3312·2021-10-13 09:40
閱讀 6051·2021-09-26 09:46
閱讀 662·2019-08-30 15:55
閱讀 1410·2019-08-30 15:53
閱讀 1580·2019-08-29 13:55
閱讀 2997·2019-08-29 12:46
閱讀 3204·2019-08-29 12:34