基於requirejs的vue2專案 (三)

heruiwoniou發表於2019-02-16
UIJSVue

這裡是打包篇

使用的是requirejs的r.js進行打包

思路是,通過entrance.js裡面的require.config進行專案的初打包

因為router.js和store.js裡面的引用是動態生成的,所以r.js無法對其進行處理,這裡我們用到了nodejs來進行檔案整合

具體看程式碼

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`]
    }
  ]
}

// 這裡是通過配置檔案來組裝配置資訊對設定了同步的模板進行打包
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

//這裡是通過控制元件臺執行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)
  })


//這裡是控制檯執行完成後進行的檔案合併處理
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(`
<script src="config.js"></script>`, ``)
  fs.writeFileSync(todir + `/index.html`, html)
  console.log(`打包完成 (返回碼 : ${code})`)
})

如果有什麼問題可以留言質詢,覺得有用就收藏吧

相關文章