改造vue-cli,让它更好用

7,574

vue-cli真的很好用?

vue-cli是一个整合了webpack+vue的脚手架,通过这个脚手架,我们可以很方便地创建一个vue项目,甚至引入了vuex和vue-router。webpack的配置对用户来说是透明,用户无需关注webpack的详细配置,从而提高开发效率。
那么vue-cli真的很好用吗?让我们来看看vue-cli产生的Webpack配置。首先我们看下入口文件配置:

 entry: {
    app: './src/main.js'
 }

很明显,这是一个单入口文件,结合vue-router是可以实现单页面项目,打包起来也很方便,只有一个html文件和对应的静态文件。这个优点同时也是缺点,即如果我们的项目比较庞大,那么打包后所有的逻辑和业务都在一个文件里面。有几个缺点:

  1. 所有逻辑和业务在一个页面,导致页面加载慢
  2. 打包和编译的时候很慢,降低开发效率
  3. 高度耦合,打包的时候,如果有一个地方出错,打包部署后,会导致整个网站都无法访问

这些缺点也是挺致命的,想想如果你打包的时候调用了一个undefined方法,然后疏忽了发布到外网去,你们老板接下来就要找你好好聊天了。

基于以上,怎么改进vue-cli创建的项目呢?答案当然就是分模块了,对webpack配置进行修改,打包和编译都按模块来,这样就不会把所有的逻辑都放入一个页面内,编译和打包都是按模块了,降低耦合度,利于分工开发(一个人一个模块)。

改造

1.修改目录结构:

原先的结构:

改造后的:

modules #所有模块文件夹
└───   assets #所有模块共用的静态文件
│    │   css
│    │   img
│    │   js
└───   common #所有模块公用的js代码,比如util.js
└───   components #所有模块公用vue子模块,比如header.vue
└───src #所有模块的源码文件夹
│   └─── module_name #模块名
│   │     └─── assets #该模块特有的静态文件
│   │           │   css
│   │           │   img
│   │           │   js
│   │     └─── components #该模块特用vue子模块
│   │     └─── router #该模块特用vue路由设置
│   │     └─── util #该模块特用共有类js
│   │     │  App.vue #容器
│   │     │  index.html #模块模板文件
│   │     │  main.js #模块入口文件,文件名不要修改!!!

我们先看最主要的修改,即添加了modules文件夹,modules下的src文件夹下就是所有模块了,多个模块有共享的assets和components,各个模块也有各自的assets和components。通过对比,我们可以知道,其实就是将vue-cli的src下单个模块划分成为多个模块。当然,各个模块如果你想按照原来vue-cli产生的模式进行开发也是可以的,各个模块可大可小,不过建议各个模块不要太大,不然分模块的意义就不大了。

2.修改webpack配置文件

1、修改webpack.base.config.js入口文件:

entry: {
    app: utils.getEntry() // 之前是./src/main.js
}

utils.getEntry获取当前正在开发的模块的入口文件,所以我们需要一个方法可以获取到当前正在运行的模块的方法,这里我的思路就是在我们运行npm run sart/build的时候,去执行一个js文件,这个js文件可以通过prompt获取用户输入他想要运行的模块,然后再启动webpack服务器的时候将当前要运行的模块作为参数传入。

2、添加start.js/build.js 所以在command文件夹下添加start.js文件,内容如下:

const exec = require('child_process').exec
const { prompt } = require('inquirer')
const chalk = require('chalk')
// 询问用户想运行哪个模块,放入module变量当中
const question = [
  {
    type: 'input',
    name: 'module',
    message: 'Module name:',
    validate (val) {
      if (val === '') {
        return 'Module name is required!'
      } 
      return true
    }

  }
]
module.exports = prompt(question).then(({module}) => {
  // 要运行的模块作为参数传给dev-server.js
  let cmdStr = `node ./build/dev-server.js ${module}`
  var child = exec(cmdStr)
  child.stdout.on('data', function(data) {
    console.log('stdout: ' + data)
  })
  child.stderr.on('data', function(err) {
    console.log(err)
    process.exit()
  })
})

build.js内容如下:


const { prompt } = require('inquirer')
const exec = require('child_process').exec
const chalk = require('chalk')
const ora = require('ora')

const question = [
  {
    type: 'input',
    name: 'module',
    message: 'Module name:',
    validate (val) {
      if (val === '') {
        return 'Module name is required!'
      } 
      return true
    }
  }
]

module.exports = prompt(question).then(({module}) => {
  const spinner = ora(`Building ${module}...`)
  
  spinner.start()
  // 要运行的模块作为参数传给build.js
  var child = exec(`node ./build/build.js ${module}`)
  child.stdout.on('data', (data) => {
    console.log('stdout: ' + data)
  })

  child.stderr.on('data', function(err) {
    console.log(chalk.red(`\n building ${module} error`))
    console.log(chalk.red(err))
    process.exit()
  })

  child.on('close', function(code) {
    spinner.stop()
    console.log(chalk.green('\n √ Build completed!'))    
  })
})

node运行的时候传入参数后,就可以通过process.argv获取了,因为我们传入的是第二个参数,所以process.argv[2]就是我们输入的模块名了

3、添加utils.js辅助方法

// 获取项目路径根路径
exports.getProjectPath = () => {
  console.log(fs.realpathSync(process.cwd()))
  return fs.realpathSync(process.cwd())
}
// 获取当前开发模块的路径, 如modules/views/test/
exports.getModulePath = () => {
  var moduleName = process.argv[2]
  return exports.getProjectPath() + '/modules/src/' + moduleName
}

因此获取我们当前模块的入口文件是这样的:

//获取子模块的入口文件,如modules/views/test/main.js
exports.getEntry = () => {
  return exports.getModulePath() + '/main.js'
}

需要打包的模块的文件是这样的:

// 根据当前正在开发的模块,获取想要打包的文件
exports.getOuputFileName = () => {
  var moduleName = process.argv[2]
  return exports.getProjectPath() + `/../${moduleName}/index.html`
}

4、当然我们打包的时候,打包文件是需要放在不同的模块下的,而不是全都都打包到一个html下,所以修改webpack.prod.config.js文件,修改HtmlWebpackPlugin插件,指定打包的路径

new HtmlWebpackPlugin({
  filename: utils.getOuputFileName(),
  template: utils.getModuleTemplate(),
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
  }

5、修改package.json文件

"scripts": {
    "start": "node command/start.js cross-env NODE_ENV=develoment",
    "build": "node command/build.js"
  },

这样基本就完成了开发运行时,按照各个模块运行/打包了。

大家有没有发现,其实我们各个模块之间的目录结构都差不多,每次新建模块的时候都需要去复制黏贴,很机械化,那么我们可以做到自动化。

自动化添加模块

基本思路是我们把模块固定的结构放在github上,附上我自己的链接:github.com/VikiLee/mod…
然后使用download-git-repo去下载到本地来。当然我们需要通过prompt询问用户想要新建的模块名,然后从github上download下来到这个模块文件夹下就ok了,在command文件夹下新建create.js,内容如下:

const download = require('download-git-repo')
const { prompt } = require('inquirer')
const ora = require('ora')
const chalk = require('chalk')
const fs = require('fs')

var question = [
  {
    type: 'input',
    name: 'moduleName',
    message: 'Please input module name:',
    validate(val) {
      if(val === ''){
        return 'Module name is required'
      }
      return true
    }
  }
]

module.exports = prompt(question).then(({moduleName}) => {

  //模块存在
  if (fs.existsSync(`./modules/src/${moduleName}`)) {
    console.log(chalk.red(`Module '${moduleName}' exists!`))
    process.exit()
  }

  const spinner = ora('Downloading template...')
  
  spinner.start()
  download(`VikiLee/module_tempate#master`, `./modules/src/${moduleName}`, (err) => {
    if (err) {
      console.log(chalk.red(err))
      process.exit()
    }
    spinner.stop()
    console.log(chalk.green('New module has been created successfully!'))
  })
})

同时修改package.json文件,添加create命令

"scripts": {
    "create": "node command/create.js",
    "start": "node command/start.js cross-env NODE_ENV=develoment",
    "build": "node command/build.js"
  },

这样就通过自动化的方式新建模块了。

git地址:github.com/VikiLee/web…