基于requirejs的vue2项目 (三)

这里是打包篇

使用的是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('\r\n<script src="config.js"></script>', '')
  fs.writeFileSync(todir + '/index.html', html)
  console.log(`打包完成 (返回码 : ${code})`)
})

如果有什么问题可以留言质询,觉得有用就收藏吧