改造vue-cli，让它更好用

站长

2023年09月26日 18:37 · 阅读数 44

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文件和对应的静态文件。这个优点同时也是缺点，即如果我们的项目比较庞大，那么打包后所有的逻辑和业务都在一个文件里面。有几个缺点：

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

这些缺点也是挺致命的，想想如果你打包的时候调用了一个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…

转载自:https://juejin.cn/post/6844903657083797512