这里是打包篇

运用的是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})`)
})

如果有什么问题能够留言质询,以为有效就珍藏吧