Написать базисный Webpack из кли

Написать базисный Webpack из кли

Лучший опыт чтения, пожалуйста , посетите: zhangzippo.github.io/posts/2019 / ...

предисловие

Мы часто вступаем в контакт с передним концом строительных лесов и разнообразием Cli инструментов, подобно вя-кли базируется WebPack консоли инструментов, мы иногда имеем свой собственный персонализированный спрос на быстрое строительство проекта, на этот раз мы можем написать CLI инструмент.

готовый

Здесь мы представляем на основе Webpack, чтобы написать инструмент Cli, спереди назад разговор, мы пишем CLI, в первую очередь определить команду, срабатывающего процесс сборки команды WebPack. Таким образом, мы в основном необходимы следующие наборы:

Командир: интерфейс командной строки полное решения, вы можете легко создавать пользовательскую командную строку вопрошающий: командную строку, используемую для создания интерактивных webpack4: После того, как фундамент построен более чем несколько основных набора мы можем начать писать командную строку инструмент

начать

Посмотрите на наш рабочий каталог:

├── bin   --定义自定义命令
├── src
│   ├── build   -- 构建流程
│   ├── develop  -- 开发流程
│   ├── produce
│   └── utils
└── webpack  --webpack配置文件
复制代码

команды

Открыть package.json, создать бен поле, имя (например, блок) на наши команды, выполнять файлы указывают на наш каталог бен.

"bin": {
    "block": "./bin/block-cli.js"
  },
复制代码

Это означает, что наша команда начала блока, такие как блок сборки, блок инициализации и так далее. Тогда мы пишем блок-cli.js, обратите внимание на начало файла должен быть #! / Usr / бен / окр узел, о роли этой линии все на своей собственной Baidu бар. Здесь необходимо ввести командующий инструментарий. Здесь командир использования кратко инструменты:

#!/usr/bin/env node
const program = require('commander');
/**
 * project init
 */
program
  .command('init')
  .description('project init')
  .action(() => {
    init();
  });
/**
 * create modules and pages
 */
program
  .command('create <paths...>')
  .description('create module‘s or page’s path')
  .action((paths) => {
    createTemplete(paths);
  });
/**
 * build progress
 */
program
  .command('build')
  .option('-m, --module [module]', 'Specified the build module')
  .option('-p, --page [page]', 'Specified the build page')
  .description('build the project')
  .action((options) => {
    process.env.NODE_ENV = 'production';
    const build = require('../lib/build/build');
    build(options.module, options.page);
  });
program.parse(process.argv);
复制代码

Мы в основном используем три метод, опция, команды, действия, вот краткие, опционные связанные параметры для нас, чтобы создать команду, например, командир создает опцию по умолчанию для нас --help, например, мы можем выполнить блок --help , то вывод на консоль поможет нам все команды и параметры опции, которые определены следующим образом:

$ block --help 
Options:
  -V, --version                  output the version number
  -conf, --config <config-name>  output the info of target config
  -h, --help                     output usage information

Commands:
  init                           project init
  create <paths...>              create module‘s or page’s path

复制代码

Если мы хотим, чтобы настроить вывод справочной информации, мы можем сделать это (при вызове --help --help событие будет инициировать реализацию этой функции обратного вызова):

program.on('--help', () => {
  console.log(`\r\nRun ${chalk.greenBright('block <command> --help')} for detailed usage of given command.`);
});
复制代码

Давайте посмотрим на первой строке первой линии, которую мы называем командой ( «инициализации»), мы создали команду инициализации (блок инициализации) .description создать описание для команды, которая поможет в информации отображается, действие в мы хотим, чтобы выполнить эту команду вещь, где мы провели метод инициализации, чтобы создать несколько фиксированного каталога контента здесь не осуществляется. Наши первые три команды блока сборки, использование команды связывания параметров, вы можете видеть, что мы называем .option метод установить два параметра -m и -p означает модуль и страницы, моя логика здесь заключается в создании конкретных модуль и страницы. Выполнить параметры блока параметров -МЫ -Pb действия, включенные в стоимости этой методы два варианта, program.parse (process.argv) Наконец, этот метод в команду закончится команда: эта формулировка, так что, когда выполняются ,

Настройка процесса сборки

Здесь мы можем поставить наши предопределенные профили WebPack поставили нас WebPack файл, есть не ребенок, к примеру, вы используете свой собственный конфигурационный файл.

Постройте выполнение процесса

Так как это средство кли для нашего собственного определения, при использовании мы не будем использовать Cli призывание WebPack, такие, как осуществление нашего обычного времени сборки будет использовать команду WebPack --Config, в нашем собственном инструменте построения мы должны быть более элегантный вариант узла-апи выполняется с использованием WebPack конструкт, примеры:

import webpack from 'webpack';
import configuration from '../../webpack/webpack.config';

module.exports = () => {
  webpack(configuration, (err, stats) => {
    if (err) {
      console.error(err.stack || err);
      // if (err.details) {
      //   console.error(err.details);
      // }
      return;
    }
    console.log(stats.toString({
      colors: true,
      env: true,
    }));
    const info = stats.toJson();
    if (stats.hasErrors()) {
      console.error(info.errors);
    }

    if (stats.hasWarnings()) {
      console.warn(info.warnings);
    }
  });
};
复制代码

Конфигурация вот что мы подготовили в конфигурационном файле WebPack заранее, мы называем метод WebPack () для настройки входящего обратного вызова содержит информацию и статистику заблуждаются заряда двух параметров и выдает сообщение об ошибке, что мы обычно видим процесс сборки. Иногда мы можем использовать WebPack-DEV-сервер, это также способ обеспечить узлы API вызовы, следующие примеры:

import webpack from 'webpack';
import path from 'path';
import webpackDevServer from 'webpack-dev-server';
import merge from 'webpack-merge';
import chalk from 'chalk';
import getCommonConfig from '../utils/getCommonConfig';

module.exports = (modules = '*', pages = '*') => {
  const rootPath = process.cwd();
  const configuration = merge(getCommonConfig('development', modules, pages), {
    mode: 'development',
    devtool: 'source-map',
    plugins: [
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin(),
    ]
  });
  const options = {
    contentBase: path.join(rootPath, 'static'),
    overlay: true,
    open: false,
    hot: true,
    compress: true,
    port: 8081,
    stats: {
      colors: true,
    },
    host: 'localhost',
    publicPath: '/'
  };
  webpackDevServer.addDevServerEntrypoints(configuration, options);
  const compiler = webpack(configuration);
  const server = new webpackDevServer(compiler, options);
  server.listen(8081, 'localhost', () => {
    console.log(chalk.greenBright('block dev-server listening on port 8081'));
  });
};
// module.exports = serverStart;
复制代码

Здесь мы должны вызвать webpackDevServer.addDevServerEntrypoints Для поддержки hotreload, другое использование API когда-либо перед записью параметров конфигурации файл конфигурации devserve мы должны пройти этот метод, не нужно определить в файле конфигурации. Мы экспортируем метод выполнения, определен в командной строке, то вызов будет завершен Cli инструментов нашего обычая.

в конце концов

Выше мы завершили основной поток простых инструментов Cli, вы можете пойти, чтобы обогатить процесс в соответствии с их потребностями.