实现迷你 vue-cli

1. 创建一个文件夹dd 执行npm init 创建一个package.json
2. 在里面新建文件bin ,在bin里新建一个index.js
3. 安装webpack处理参数的库

npm i  webpack minimist -D 

4. 在package.json里添加"bin":"bin/index.js"
5. 在bin/index.js

#!/usr/bin/env node
const webpack = require('webpack');
const minimist = require('minimist');
const path = require('path');
const args = minimist(process.argv.slice(2));

6. 在dd里新建webpack.config.js

// 入口 出口，可以配置式的
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
}

7. 补充在bin/index.js

...
const args = minimist(process.argv.slice(2));
// webpack.config.js的内容引用进来
const builtInWebpackConfig = require('../webpack.config');

// 打包
const runWebpackBuild = () => {
  webpack(builtInWebpackConfig, (err, stats) => {
    if (err || stats.hasErrors()) {
      return console.log('build error');
    }

    console.log('build success!');
  })
}

runWebpackBuild();

8. 新建demo文件夹,里面新建index.js(里面console.log('hello')) init出 packjson.js 在里面增加命令："build": "dd"

9. 在dd 文件夹下执行 npm link 在demo下执行 npm link dd

10. 在demo下执行npm run build

11. 自定义一个 命令 在demo的package.json里增加一个命令"clean": "dd clean"

在bin/index.js增加

#!/usr/bin/env node

const webpack = require('webpack');
const minimist = require('minimist');
const path = require('path');

const builtInWebpackConfig = require('../webpack.config');
const args = minimist(process.argv.slice(2));

const fname = 'dd.config.js';

// 存命令，包括用户自定义的命令的
const __commands = {};

// 用户怎么写插件？
const api = {
  // 自定义命令
  registerCommands(name, impl) {
    const command = __commands[name];
    if (!command) {
      __commands[name] = impl;
    }
  },
  chainWepack() {},
}

// 打包
const runWebpackBuild = () => {
  webpack(builtInWebpackConfig, (err, stats) => {
    if (err || stats.hasErrors()) {
      return console.log('build error');
    }

    console.log('build success!');
  })
}

// 支持用户根目录下配置一个文件
const readLocalOption = () => new Promise((resolve) => {
  const config = require(path.join(process.cwd(), fname)) || {};
  const { plugins: { commands = [] } = {} } = config;
  if (commands.length) {
    commands.forEach(command => {
      command(api);
    })
  }

  resolve(__commands)
})

// 如果什么参数都没有，默认执行打包
readLocalOption().then((commands) => {
  const command = args._[0];
  if (commands[command]) {
    commands[command]();
  }
  else {
    runWebpackBuild();
  }
})

12. 在demo文件夹下新建dd.config.js 在demo文件夹下新建plugin文件夹，里面新建clean.plugin.js

// dd.config.js
const CleanPluginForCommand = require('./plugin/clean.plugin');

module.exports = {
  plugins: {
    commands: [CleanPluginForCommand('hello world!')],
    webpack: {},
    babel: {}
  }
}

// clean.plugin.js
module.exports = (o) => (api) => {
  api.registerCommands('clean', () => {
    console.log('执行了 clean 命令的逻辑', o)
  })
}

13. 执行npm run clean 验证