基于requirejs的vue2項(xiàng)目 (三)

lijy91 發(fā)布于2019-08-20 16:36 / 717人閱讀

摘要：這里是打包篇使用的是的進(jìn)行打包思路是通過里面的進(jìn)行項(xiàng)目的初打包因?yàn)楹屠锩娴囊檬莿?dòng)態(tài)生成的所以無法對其進(jìn)行處理這里我們用到了來進(jìn)行文件整合具體看代碼這里是通過配置文件來組裝配置信息對設(shè)置了同步的模板進(jìn)行打包這里是通過

這里是打包篇

使用的是requirejs的r.js進(jìn)行打包

思路是,通過entrance.js里面的require.config進(jìn)行項(xiàng)目的初打包

因?yàn)閞outer.js和store.js里面的引用是動(dòng)態(tài)生成的,所以r.js無法對其進(jìn)行處理,這里我們用到了nodejs來進(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"]
    }
  ]
}

// 這里是通過配置文件來組裝配置信息對設(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

//這里是通過控件臺(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

  //刪除多說的文件
  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})`)
})

如果有什么問題可以留言質(zhì)詢,覺得有用就收藏吧

云服務(wù)器 GPU云服務(wù)器基于webrtc的項(xiàng)目基于webrtc的開源項(xiàng)目 java第三階段項(xiàng)目 vue2.0 cdn

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83034.html

發(fā)表評論

登陸后可評論

0條評論

lijy91

男|高級講師

我要關(guān)注我要私信

TA的文章

Dmit，全新日本Pro VPS 8折，100M大帶寬，CN2 GIA/10099(9929)/CM

閱讀 3229·2021-11-10 11:36
實(shí)戰(zhàn)！《長津湖》為什么這么火爆？我用 Python 來分析貓眼影評

閱讀 3392·2021-10-13 09:40
Arduino開發(fā)-TFT_eSPI庫學(xué)習(xí)

閱讀 6633·2021-09-26 09:46
天天都在使用CSS，那么CSS的原理是什么呢？

閱讀 736·2019-08-30 15:55
Codepen 每日精選（2018-4-10）

閱讀 1476·2019-08-30 15:53
CSS網(wǎng)格布局基礎(chǔ)

閱讀 1653·2019-08-29 13:55
純CSS的星級評價(jià)效果

閱讀 3062·2019-08-29 12:46
CSS題目及答案整理

閱讀 3293·2019-08-29 12:34

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

基于requirejs的vue2項(xiàng)目 (三)

相關(guān)文章

**基于requirejs的vue2項(xiàng)目 (一)**

**基于requirejs的vue2項(xiàng)目(二)**

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

大前端 - 收藏集 - 掘金

**前方來報(bào)，八月最新資訊--關(guān)于vue2&3的最佳文章推薦**

發(fā)表評論

0條評論

lijy91

男|高級講師

TA的文章

Dmit，全新日本Pro VPS 8折，100M大帶寬，CN2 GIA/10099(9929)/CM

實(shí)戰(zhàn)！《長津湖》為什么這么火爆？我用 Python 來分析貓眼影評

Arduino開發(fā)-TFT_eSPI庫學(xué)習(xí)

天天都在使用CSS，那么CSS的原理是什么呢？

Codepen 每日精選（2018-4-10）

CSS網(wǎng)格布局基礎(chǔ)

純CSS的星級評價(jià)效果

CSS題目及答案整理

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

基于requirejs的vue2項(xiàng)目 (三)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！