воздвигни себя

JavaScript
воздвигни себя

задний план

  • Если вы хотите сделать тест или демонстрацию чего-то, вам нужно создать новый проект. Если начинать с 0, то долго настраивать много чего, если напрямую использовать какие-то популярные скаффолдинги, типа vue-cli и т.п., для работы черного ящика, то нужно читать документацию, а она сложно разглядеть что там...
  • Фактически, в определенном проекте для создания нового компонента должны быть созданы некоторые фиксированные файлы, такие как xxx.js, xxx.html, xxx.css, и может быть некоторый фиксированный контент, который необходимо скопировать вручную. .
  • Проекты, которые я обычно делаю, свалены на полки, а конфигурацию конструкции и прочее наполнение я не пробовал...

Настоящим

  • Повысьте производительность и повторно используйте некоторые многоразовые вещи
  • Создавайте собственные строительные леса, знакомьтесь с конфигурациями сборки и разбирайтесь в разработке строительных лесов.

строительные леса

инструмент

  • написание команды командира, например, init
  • мел делает результат цветным
  • скачать-git-repo, скачать шаблон
  • Взаимодействие с командной строкой inquirer для получения пользовательского ввода
  • или индикатор выполнения
  • log-символы выводят некоторые знаки, такие как √
  • движок шаблонов руля, более сложные или продвинутые точки могут работать с металлургическим мастером

шаг

  1. выполнить команду инициализации
  2. Для взаимодействия с пользователем позвольте пользователю ввести описание проекта, автора и другую информацию.
  3. Загрузите соответствующий файл шаблона в соответствии с пользовательским вводом.
  4. Замените соответствующее содержимое файла шаблона в соответствии с информацией, введенной пользователем.
  5. Заканчивать

код

Код не опубликован, вы можете перейти кcreate-repo-cliСсылаться на

Конфигурация общих проектов для WebPack для инструментов сборки

Примечание. Все, что связано с классом сборки, должно быть установлено в разделе devDependencies, то есть добавить --save-dev при установке.

webpack

Конфигурация всех функций здесь не указана по порядку, написана только конфигурация некоторых классов оптимизации. Если вы хотите узнать все конфигурации, вы можете перейти непосредственно кwebpack-project-template

  • webpack-merge

Конфигурация среды разработки, производственной среды и ssr записывается в отдельные файлы, которые легко поддерживать. Извлеките общие части, а затем передайтеwebpack-mergeПриходите сливать извлеченную часть. пример:

const merge = require('webpack-merge')
const base = require('./webpack.base.config')

const dev = {...}
module.exports = merge(base, dev)
  • copy-webpack-plugin

Скопируйте отдельные файлы или целые каталоги в каталог сборки. Подходит для копирования некоторых статических ресурсов, таких как картинки и т.п.

const CopyPlugin = require('copy-webpack-plugin')

new CopyPlugin([
    { from: path.resolve(__dirname, 'public'), to: '../dist/public' }
  ]),
  • mini-css-extract-plugin

Плагин, который извлекает CSS в отдельные файлы, создает файл CSS для каждого файла js, содержащего CSS, и поддерживает загрузку CSS и sourceMap по требованию.

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

new MiniCssExtractPlugin({
    filename: 'chunk.[name].[contenthash:8].css',
  }),
  • friendly-errors-webpack-plugin

Когда Webpack компилируется по умолчанию, будет много бесполезной информации, которую нужно очистить, отображается только небольшое количество информации, и ее легко устранить. Используйте этот плагин, чтобы очистить консольные сообщения. Вы также можете настроить обратные вызовы обработки ошибок и т. д.

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')

new FriendlyErrorsWebpackPlugin(),
  • happypack

Многопоточные сборки для более быстрой сборки

const HappyPack = require('happypack')
const os = require('os')

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
new HappyPack({
    id: 'babel',
    loaders: ['cache-loader', 'babel-loader?cacheDirectory'],
    threadPool: happyThreadPool,
}),
  • speed-measure-webpack-plugin

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

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()

module.exports = smp.wrap(merge(base, dev))
eslint

Спецификация кода обязательна. Использование eslint здесь также поддерживает проверку типа ts, ведь tslint прекратил техническое обслуживание, а eslint официально рекомендуется для ограничений. В отрасли существует несколько стандартных спецификаций, таких как airbnb. Здесь я унаследовал eslint-config-airbnb и внес небольшие изменения. Если вы используете его напрямую, это нормально:

//.eslintrc.js
module.exports = {
    extends: ['eslint-config-airbnb'],
}
Commitlint

Унифицируйте и стандартизируйте формат коммита, чтобы информация о коммите отображалась аккуратно. Установите commitlint, @commitlint/cli, @commitlint/config-conventional

//package.json
"pre-commit": [
    "lint"
  ],
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -e .git/COMMIT_EDITMSG"
    }
  }
//commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'scope-empty': [0],
  },
}

Общая конфигурация проекта с накопительным пакетом в качестве инструмента сборки

rollup подходит для создания библиотек инструментов. Конфигурация, которую он использует, на самом деле аналогична по функциям webpack. Конкретная конфигурация не детализирована. Если вы хотите знать, вы можете увидетьrollup-project-template

С руководством пользователя и соответствующим кодом

create-repo-cli

A cli to create project quickly...

install global

sudo npm install create-repo-cli -g

create webpack project

  1. create-repo init [project-name]
  2. choose webpack template type
  3. run yarn && yarn start

create rollup project

  1. create-repo init
  2. choose rollup template type
  3. run yarn
  4. cd src/[component-name]
  5. run yarn start

code

наконец

  • Для получения дополнительной информации, пожалуйста, следуйте за мнойblog, дай мне звезду~
  • Если вы считаете, что контент полезен, вы можете обратить внимание на мой официальный аккаунт «Front-end Q» и учиться и расти вместе~~
    GitHub
Категории