Вам просто нужно написать бизнес с радостью, остальное оставьте мне

Архитектура внешний интерфейс

Тукао-Пойнт

  • Каждый раз открывать новый проект очень больно, а найти старые проекты для копирования, вставки, удаления и преобразования конструкции проекта (структуры проекта, компонентов, общедоступных стилей, упаковки и конструкции) слишком мало.
  • Хочешь ремонтировать и апгрейдить что ли, все проекты надо шлепать заново.Лучше выкинуть систему лесов, чтобы избавиться от этих ненужных заморочек.
  • Другое дело, что это действительно уместно в будущем, чтобы заняться личной жизнью, хахаха.
  • Код здесь, @water-react

Какую болевые точки решить?

  • Больше никаких копипастов и прочего
  • Единое управление шаблонами проектов
  • Процесс строительства унифицирован, а строительные изделия стандартизированы.
  • Сконцентрируйтесь на письменном бизнесе, просто сделайте фреймворк один раз
  • Команда хочет что-то накопить, и это можно легко расширить, расширив строительные леса.

Что кли собирается делать?

  • Зачем вам функция инициализации проекта, иначе она нужна для чего угодно
  • А как насчет инициализации?В это время нужно настроить шаблон.Да сделать несколько наборов общих шаблонов
  • После того, как проект инициализирован, проект всегда нужно запускать, а затем его нужно собирать.
  • Создание, все знакомы с webpack, snowpack, rollup и т. д., в основном это путь, выберите тот, который вам нравится, и включите настройку
  • Создание среды разработки, создание рабочей среды, анализ зависимостей пакетов и т. д. являются важными функциями.

Как это сделать?

  1. Реализовать прототип скрипта cli
  • использоватьpackage.jsonсерединаbinатрибут для указания местоположения исполняемого файла, соответствующего каждой внутренней команде

Система узла естественным образом поддерживает функцию сценариев сопоставления

{
  "name": "iwr",
  "version": "1.0.1",
  "description": "基于 react 的 cli 脚手架构建工具",
  "bin": {
    "iwr": "bin/iwr.js"
  },
  "homepage": "https://github.com/howieyi/water-react",
  "author": "水逆",
  "license": "MIT"
}
  • bin/iwr.js, то вам нужно написать содержимое скрипта
// 这一行很关键，是告知系统通过环境变量中的 node 来执行该脚本
#!/usr/bin/env node

// commander 是一个命令行处理工具，用作定义和处理命令以及其参数
const program = require("commander");
const version = require('../package').version;

program
  .version(version)
  .usage(
    `  
  water create
  water dev
  water prod -i -a [analyzerPort]
  water umd -i`
  )
  .description(
    `Params:
  
  dev:
    -i 是否打印详细信息
  
  prod: 
    -i 是否打印详细信息
    -a [analyzerPort] 是否开启代码依赖分析（默认端口8989）

  umd:
    -i 是否打印详细信息  
    `
  )
  .command('create', '初始化项目')
  .command('dev', '开发环境构建')
  .command('prod', '生产环境构建')
  .command('umd', '公共包构建');

program.parse(process.argv);
  1. Реализовать собственный прототип шаблона
  • Шаблон должен быть основан на исторических проектах, извлекать общность и извлекать набор общедоступных кодов.
  • Файл конфигурации должен быть настроен для информирования конфигурации, связанной с проектом сценария, такой как определение основного каталога, каталога компиляции, каталога сопоставления псевдонимов и т. д.

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

  • Вот примерiwr.config.js 
const proxyMapping = {};

// 接口前缀
const apiPrefix = 'https://api.test.example.com';

// 接口 uri 前缀
const uriPrefix = ['/api'];

// 代理映射
uriPrefix.forEach(uri => {
  proxyMapping[uri] = {
    target: apiPrefix,
    changeOrigin: true,
    secure: false,
    pathRewrite: {
      [`^${uri}`]: apiPrefix + uri,
    },
  };
});

module.exports = {
  // 自定义端口
  port: '3001',
  // 项目根目录
  resolvePath: './src',
  // 构建主路径
  publicPath: '/',
  // 构建产物目录
  buildPath: './dist',
  // 默认迁移文件目录
  copyPath: './src/assets/public',
  // 接口代理
  proxy: proxyMapping,
  // 是否支持 markdown 转义
  markdown: false,
};
  1. Сборка по шаблонам

Вот конструкция webpack5 для достижения

  • Код здесь, @water-react
  • Режим разработки, для разработки и строительства необходимы hrm/sourceMap/scss/ts

Здесь мы напрямую вызываем webpack-dev-server и показываем основной код.Основная идея заключается в том, чтобы собрать код согласно приведенному выше конфигурационному файлу.Я не буду повторять настройку вебпака.Я думаю всем она знакома.

// 获取主配置
const webpackConfig = require(`../webpack/build/webpack.dev.js`)({
  ...appConfig,
});

const webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server");

try {
  const devServerConfig = webpackConfig.devServer;
  // 直接调用 webpack-dev-server
  const server = new WebpackDevServer(webpack(webpackConfig), devServerConfig);
  // 开启监听
  server.listen(devServerConfig.port, devServerConfig.host, err => {
    if (err) {
      throw err;
    }
  });
} catch (error) {
  console.error(error);
  process.exit(-1);
}
  • Производственный режим, производственная среда построена и упакована

Вставьте часть основного кода

const webpack = require("webpack");

// 获取主配置
webpackConfig = require(`../webpack/build/webpack.prod.js`)({
  ...appConfig,
});

const buildStamp = Date.now();

// 直接调用 webpack
webpack(webpackConfig, async (err, stats) => {
  if (err || stats.hasErrors()) {
    if (err) {
      console.error(red(err.stack || err));
      err.details && console.error(red(err.details));
      return;
    }

    stats.hasErrors() && console.error(stats.toString({ colors: true, chunks: false }));

    console.log("\n> 构建异常 \n");
  } else {
    isInfo && console.warn(stats.toString({ colors: true, chunks: false }));

    console.log(`\n> 构建完成，耗时 ${Date.now() - buildStamp} ms`);
  }
});
  1. Анализ зависимостей пакетов и дальнейшая оптимизация шаблонов

На основе ссылки на производственную сборку увеличеноwebpack-bundle-analyzerАнализ зависимых от пакетов операций

analysis.png

  1. Интерактивная командная строка для реализации проекта инициализации

Здесь нужно использоватьinquirerЭтот пакет специально предоставляет инструменты для взаимодействия с командной строкой.

#!/usr/bin/env node

const { join } = require('path');
// 交互命令行工具
const { prompt } = require('inquirer');
const chalk = require('chalk');
const { exec } = require('child_process');

const { copyFolder } = require('../webpack/utils/file');

const developPath = process.cwd();
const iwrPath = join(__dirname, '..');
const templatePathPrefix = 'template';

// 1. 自定义选项
prompt([
  {
    type: 'input',
    name: 'name',
    message: '项目名称(英文)：',
    default: 'water-ui',
  },
  {
    type: 'input',
    name: 'description',
    message: '项目描述：',
    default: 'react 项目',
  },
  {
    type: 'input',
    name: 'version',
    message: '项目初始版本：',
    default: '1.0.0',
  },
  {
    type: 'input',
    name: 'author',
    message: '作者：',
    default: 'iwr',
  },
  {
    type: 'input',
    name: 'port',
    message: '启动端口',
    default: '8001',
  },
  {
    type: 'confirm',
    name: 'typescript',
    message: '使用 Typescript：',
    default: 'Y',
  },
])
  .then(options => {
    const { name, typescript } = options;

    const templateName = `react${typescript ? '-ts' : ''}`;
    const templatePath = join(iwrPath, templatePathPrefix, templateName);
    const toPath = join(developPath, name);

    // 2. 复制项目模板，并替换自定义内容
    copyFolder(templatePath, toPath, options);
    console.log(chalk.green('> ') + '初始化完成');

    // 3. 执行 npm i 脚本
    exec(`cd ${name} && npm i`, (err, stdout, stderr) => {
      if (err || stderr) {
        console.log(err, stderr);
        process.exit(-1);
      } else {
        console.log(stdout);
      }
    });
  })
  .catch(error => {
    if (error.isTtyError) {
      console.error('当前环境暂不支持');
      // Prompt couldn't be rendered in the current environment
    } else {
      // Something else when wrong
      console.error(error);
    }
  });

Фактически, приведенное выше может иметь больше игрового пространства и расширения, в зависимости от потребностей проекта, код здесь, @water-react

  1. Опубликовать в нпм
# 1. 需要先到 https://www.npmjs.com/ 注册一个所属账号
# 2. 设置仓库到 npm，推荐用 nrm 工具管理仓库
$ npm set registry https://registry.npmjs.org/

# 3. 使用注册的账号 登录到 npm
$ npm login

# 4. 到项目根目录直接 publish
$ npm publish
  1. После завершения выпуска вы можете просмотреть выпущенный вами пакет на официальном веб-сайте npm, например пакет, выпущенный мной.iwr

iwr.png

  1. Установить глобально
# 全局安装命令行工具
$ npm i -g iwr

# 文件权限不够时可能会安装异常，使用以下命令即可
$ sudo npm install -g --production --unsafe-perm=true --allow-root iwr
  1. попробуй инициализировать

iwr-create.png

Хахаха, инициализация проекта завершается за несколько секунд, и я наконец-то могу лечь Код здесь, @water-react

Обновите cli, фасад все еще нуждается в поддержке

  1. классное открытие

figletа также@darkobits/lolcatjsРеализуй крутой кастомный опенинг, хахаха, установи х оружие, код здесь, @water-react

iwr-version.png

  1. Список изменений или что-то должно быть или должно быть
## v1.0.3

- 调整模板，统一采用 scss 来编写样式

## v1.0.2

- 修改初始化默认作者名称

## v1.0.1

- 完善 readme，发布到 npm

## v1.0.0

- 集成 cli 工具 `iwr`，主要为实现 `react 项目` 的构建;

  1. Readme написан хорошо, и его должны явно использовать другие.пример

  2. доступdownload-git-repoСкладской способ заменить локальный шаблон еще более простым кодом шаблона обслуживания

  3. доступoraУвеличьте буфер выполнения скрипта, добавьте асинхронное ожидание загрузки в командную строку и выполните обновление до следующего уровня.

Категории