⚠️ Эта статья является первой подписанной статьей сообщества Nuggets, и ее перепечатка без разрешения запрещена.
предисловие
В тот же период прошлого года я написал Node-basedСерия DevOps, но весь проект очень большой, и стоимость начала работы относительно высока.Малые и средние команды или новичкиСсылок не так много, поэтому для этих групп перезапущена новая инженерная серия.
Новая серия будетот 0 до 1Постепенно выстраивается полный комплекс инженерных решений, все статьи будут размещены в едином«Фронтенд Инжиниринг»в колонке.
задний план
Во-первых, перечислите некоторые проблемы, с которыми могут столкнуться небольшие команды:
- Технические характеристики
- Код не стандартизирован, стиль каждогоделай что хочешь,Качество доставки кода не поддается контролю
- совершитьнет спецификации, невозможно узнать отправленный контент разработки из коммита
- обработать
- НИОКР нетобработать, ни prd, ни итеративного управления требованиями, я не знаю, что натворил этот проект
- эффективность
- Непрерывныйповторяющаяся работа,нетТехнология накопления и осаждения
- Качество проекта
- Без спецификации не будет качества
- Все тестовые функцииискусственныйОбнаружение и возвращение требуют много времени и труда
- развертывать
- Ручное строительство, развертывание,рубить и сжигатьобщая операция
- Непостоянная зависимость и неуправляемость человека
- Нет отслеживания версий, откатов и т.д.
В дополнение к вышеупомянутым более общим пунктам, остальные антропогенные факторы окружающей среды не перечислены один за другим.путаница + неудобный.
В то же время в такой команде неясно собственное планирование команды, а отдельным людям еще труднее иметь четкий план и цели на будущее, и легко попасть в неразрывный и бесконечный цикл. бизнеса.
Когда вы находитесь в хаотической среде, не паникуйте (Герой в смутные времена, почему это не можешь быть ты?), сначала сгладьте ситуацию, затем поставьте цель и план и действуйте шаг за шагом.
Инжиниринг
Перечисленные выше проблемы можно решить путем внедрения инженерной системы, так что же такое инженерия?
В широком смысле всеПовышайте эффективность, снижайте затраты и обеспечивайте качествоСредства для этой цели относятся к категории инженерных.
С помощью ряда норм, процессов и инструментов для достиженияПовышение эффективности НИОКР, автоматизация, обеспечение качества, стабильность обслуживания, мониторинг раннего предупрежденияи т.п.
Что касается внешнего интерфейса, после появления Node вы можете использовать Node для проникновения в области, отличные от традиционной разработки интерфейсов, распространить связь R&D на весь DevOps и стать фронтенд-инженером, не «обрезая картинку».
Рисунок представляет собой простой набор процессов DevOps, технические сложности и затраты относительно скромны, в качестве отправной точки для создания небольшой команды инженеров, экономически эффективным.
Когда у команды нет правил и нет инфраструктуры, обычно можно начать с самых простых инструментов CLI, а затем перейти ко всей инженерной конструкции.
Итак, сначала поставьте перед собой небольшую цель — создать общий инструмент командной строки для команд и проектов.
Анализ инструментов CLI
Бизнес в небольшой команде обычно итерируется быстрее, и меньше времени и возможностей предоставить инфраструктуру для разработки.Чтобы избежать дублирования работы на более позднем этапе, прежде чем приступить к построению инфраструктуры, мы должны хорошо спланировать и подумать о том, что является ядром. в настоящее время отсутствует Какие функции могут быть использованы в будущем?
Кодирование никогда не бывает самым сложным, самое сложное — это не знать, какие ценные вещи можно сделать с помощью кода.
Ссылаясь на описанный выше процесс DevOps, в этой серии кратко рассматриваются четыре основных модуля CLI, а затем, если спрос изменится, мы поговорим об этом позже.
Вы можете разрабатывать инструменты CLI в соответствии с реальной ситуацией в вашем собственном проекте.Эта серия содержит только технический справочник по архитектуре.
Построить
Обычно в небольшой команде процесс построения заключается в подготовке файлов конфигурации для нескольких сред в одном или нескольких наборах шаблонов, а затем использовании инструмента сборки, такого как Webpack или Rollup, для использования предустановленной конфигурации в шаблоне с помощью сценария оболочки или других операций. , Соберите проект и, наконец, разверните его и т. д.
Это действительно простой и общий процесс CI/CD, но здесь возникает проблема: до тех пор, пока конфигурация выпуска на последнем шаге не находится под контролем, любой разработчик команды может изменить элементы выпущенной конфигурации.
Даже если сборка прошла успешно, могут возникнуть некоторые непредвиденные проблемы, например, режим Webpack — режим разработки, нет путаницы со сжатием кода сборки, а некоторые глобальные унифицированные методы не внедряются.Есть определенные риски.
Итак, вам нужно собрать конфигурацию сборки, процесс отсоединяется от шаблона проекта,Унифицированное использование CLI для управленияПроцесс сборки больше не считывает конфигурацию в проекте, а использует унифицированную конфигурацию через CLI (每一类项目都可以自定义一套标准构建配置) строить.
Избегайте производственных проблем, вызванных изменением неправильных конфигураций студентами, изучающими бизнес-разработки.
качественный
Это тот же сценарий, что и при построении: для удобства развития бизнеса часто игнорируются некоторые общие автоматические тесты и некоторые регулярные проверки формата. Например, разные привычки развития каждого человека также приведут к использованию разных правил проверки ESLINT, и будут внесены некоторые дополнительные изменения в конфигурацию ESLINT, что также является неконтролируемым моментом. Команде лучше всего использовать один и тот же набор правил проверки кода.
Следовательно, вы также можете очистить тест автоматизации, проверять от проекта, используйте CLI для захвата, тем самым обеспечивая определенный тип формата кода проекта всей команды.Объединитьсекс.
шаблон
Что касается шаблонов, в основном, пока есть блоги о CLI, обязательно будет функция шаблона.
Потому что это очень важно для команды, чтобы быстро и легко инициализировать проект или получить фрагменты кода, а также это функциональный модуль с максимальной производительностью и наиболее очевидными преимуществами в качестве инструмента CLI, но в этой главе не будет слишком многого. , а сообщения блога, размещенные в заднем шаблоне, написаны единообразно.
коллекция инструментов
Поскольку это набор инструментов, вы можете поместить в него некоторые общие классы инструментов, такие как
- Сжатие изображений (меньшее сжатое png), загрузка в CDN и т. д.
- Обновление проекта (например, обновляется общая конфигурация, CLI предоставляет функцию шаблона обновления в один клик)
- Развертывание проекта, публикация пакетов npm и т. д.
- И другие повторяющиеся операции также могут быть размещены в коллекции инструментов.
CLI-разработка
Функциональный дизайн нескольких модулей CLI был представлен ранее, и тогда мы можем официально войти в ссылку на разработку соответствующих инструментов CLI.
Построить инфраструктуру
При разработке инструмента CLI в качестве языка разработки будет использоваться TS.Если вы еще не были в контакте с TS в это время, вы можете просто использовать этот проект, чтобы ознакомиться с режимом разработки TS.
mkdir cli && cd cli // 创建仓库目录
npm init // 初始化 package.json
npm install -g typescript // 安装全局 TypeScript
tsc --init // 初始化 tsconfig.json
После глобальной установки TypeScript инициализируйте tsconfig.json, а затем измените конфигурацию, чтобы добавить скомпилированную папку и выходной каталог.
{
"compilerOptions": {
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"outDir": "./lib", /* Redirect output structure to the directory. */
"strict": true, /* Enable all strict type-checking options. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"skipLibCheck": true, /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
},
"include": [
"./src",
]
}
Выше приведена упрощенная конфигурация, но ее достаточно для текущей разработки, а элементы конфигурации TypeScript при необходимости можно изменить позже.
ESLINT
Поскольку инструмент CLI разработан с нуля, вы можете начать с простых функций, таких как разработка модуля проверки Eslint.
npm install eslint --save-dev // 安装 eslint 依赖
npx eslint --init // 初始化 eslint 配置
Использовать напрямуюeslint --initВы можете быстро настроить файл конфигурации ESlint, подходящий для вашего собственного проекта..eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"standard"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
}
}
Если вы уже определили ESlint, вы можете напрямую использовать его собственный файл конфигурации, или проект необходимо инициализировать в соответствии с дополнениями конфигурации и изменениями в проекте.
Создать класс инструмента ESLINT
Первый шаг — сравнение документов.ESlint Node.js API, используя предоставленный Node API для прямого вызова ESlint.
При необходимости добавьте элементы конфигурации ранее созданного файла .eslintrc.json и используйтеuseEslintrc:falseЗапрещается использовать конфигурацию .eslintrc самого проекта и использовать только правила, предоставленные CLI, для проверки кода проекта.
import { ESLint } from 'eslint'
import { getCwdPath, countTime } from '../util'
// 1. Create an instance.
const eslint = new ESLint({
fix: true,
extensions: [".js", ".ts"],
useEslintrc: false,
overrideConfig: {
"env": {
"browser": true,
"es2021": true
},
"parser": getRePath("@typescript-eslint/parser"),
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint",
],
},
resolvePluginsRelativeTo: getDirPath('../../node_modules') // 指定 loader 加载路径
});
export const getEslint = async (path: string = 'src') => {
try {
countTime('Eslint 校验');
// 2. Lint files.
const results = await eslint.lintFiles([`${getCwdPath()}/${path}`]);
// 3. Modify the files with the fixed code.
await ESLint.outputFixes(results);
// 4. Format the results.
const formatter = await eslint.loadFormatter("stylish");
const resultText = formatter.format(results);
// 5. Output it.
if (resultText) {
console.log('请检查===》', resultText);
}
else {
console.log('完美！');
}
} catch (error) {
process.exitCode = 1;
console.error('error===>', error);
} finally {
countTime('Eslint 校验', false);
}
}
Создать тестовый проект
npm install -g create-react-app // 全局安装 create-react-app
create-react-app test-cli // 创建测试 react 项目
В тестовом проекте используется приложение create-react-app.Конечно, вы также можете выбрать другие фреймворки или существующие проекты.Это всего лишь демонстрация, и этот проект будет использоваться для тестирования позже.
Протестируйте интерфейс командной строки
новыйsrc/bin/index.ts, используется в демоcommanderдля разработки инструментов командной строки.
#!/usr/bin/env node // 这个必须添加，指定 node 运行环境
import { Command } from 'commander';
const program = new Command();
import { getEslint } from '../eslint'
program
.version('0.1.0')
.description('start eslint and fix code')
.command('eslint')
.action((value) => {
getEslint()
})
program.parse(process.argv);
Измените pageage.json, чтобы указать запущенный js из bin (расположение исполняемого файла, соответствующего каждой команде)
"bin": {
"fe-cli": "/lib/bin/index.js"
},
беги первымtscКод TS в JS, снова используя глобальную гору NPM Link, может использоваться нормально.
Конкретное использование Commander подробно не описано.В основном, большинство инструментов CLI используют Commander в качестве инструмента командной строки для разработки, и это также представлено.
Войдите в тестовый проект прямо сейчас из командной строки и введите команду напрямуюfe-cli eslint, вы можете использовать плагин Eslint в обычном режиме, и результат будет следующим:
Украсьте вывод
Видно, что в это время подсказка не так бросается в глаза, можно использоватьchalkПлагин для украшения вывода.
Сначала намеренно переместите тестовый проект в неправильное место, а затем выполните командуfe-cli eslint
На данный момент завершен простой инструмент командной строки.Для модулей ESlint вы можете настроить больше функций в соответствии со своими идеями и планами.
строительные блоки
Настроить универсальный веб-пакет
Обычно при развитии бизнеса в качестве инструмента построения используется webpack, поэтому демо также будет упаковано с помощью webpack.
Войдите в тестовый проект из командной строки и выполните командуnpm run eject, который предоставляет элементы конфигурации веб-пакета.
Как видно из элементов конфигурации, представленных на рисунке выше, конфигурация веб-пакета CRA по-прежнему очень сложна.В конце концов, это скаффолдинг общего назначения, который совместим с различными оптимизированными конфигурациями, но в настоящее время CRA использует для сборки веб-пакет 4. В качестве нового проекта разработки CLI может напрямую выбрать webpack 5 для создания проекта без технического долга.
Вообще говоря, замена инструмента сборки не повлияет на бизнес-код, если бизнес-код похищается инструментом сборки, рекомендуется оптимизировать код.
import path from "path"
const HtmlWebpackPlugin = require('html-webpack-plugin')
const postcssNormalize = require('postcss-normalize');
import { getCwdPath, getDirPath } from '../../util'
interface IWebpack {
mode?: "development" | "production" | "none";
entry: any
output: any
template: string
}
export default ({
mode,
entry,
output,
template
}: IWebpack) => {
return {
mode,
entry,
target: 'web',
output,
module: {
rules: [{
test: /\.(js|jsx)$/,
use: {
loader: getRePath('babel-loader'),
options: {
presets: [
''@babel/preset-env',
],
},
},
exclude: [
getCwdPath('./node_modules') // 由于 node_modules 都是编译过的文件，这里做过滤处理
]
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
ident: "postcss"
},
],
],
},
}
}
],
},
{
test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
type: 'asset/inline',
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
]
},
plugins: [
new HtmlWebpackPlugin({
template,
filename: 'index.html',
}),
],
resolve: {
extensions: [
'',
'.js',
'.json',
'.sass'
]
},
}
}
Выше приведена упрощенная версия конфигурации webpack 5, а затем добавьте соответствующую команду командира.
program
.version('0.1.0')
.description('start eslint and fix code')
.command('webpack')
.action((value) => {
buildWebpack()
})
Теперь вы можете войти в выполнение тестового проекта из командной строкиfe-cli webpackМожно приобрести следующую строительную продукцию
На следующем рисунке показан продукт, созданный с использованием CRA.По сравнению с продуктом сборки на рисунке выше очевидно, что есть еще много мест для оптимизации с использованием упрощенной версии конфигурации webpack 5, поэтому заинтересованные студенты могут оптимизировать его самостоятельно, так как Демонстрация завершила предварительное техническое исследование и достигла ожидаемой цели.
На данный момент, если вы знакомы с созданием этой части, вы должны подумать, что в дополнение к элементам конфигурации веб-пакета в конструкцииБольшинство зависимостей взяты из тестового проектаВнутри, так как же определить версию React или другие зависимости для унификации?
Обычной операцией является блокировка версии с помощью шаблона, но студенты-бизнесмены могут самостоятельно настраивать зависимости версий, что приводит к несоответствиям, и непротиворечивость зависимостей не может быть гарантирована.
Поскольку CLI берет на себя всю сборку, просто рассмотрите возможность перемещения всех зависимостей в зависимости проекта, где находится CLI.
разрешить зависимости
Следующие два элемента добавляются в элемент конфигурации Webpack, указывая путь загрузки зависимостей и загрузчика, вместо чтения из node_modules, где находится проект, а чтения node_modules, где находится CLI.
resolveLoader: {
modules: [getDirPath('../../node_modules')]
}, // 修改 loader 依赖路径
resolve: {
modules: [getDirPath('../../node_modules')],
}, // 修改正常模块依赖路径
В то же время измените путь к модулю пресетов babel на абсолютный путь, указывающий на node_modules CLI (по умолчанию пресеты будут считывать зависимости от запуска Lujin).
{
test: /\.(js|jsx)$/,
use: {
loader: getRePath('babel-loader'),
options: {
presets: [
getRePath('@babel/preset-env'),
[
getRePath("@babel/preset-react"),
{
"runtime": "automatic"
}
],
],
},
},
exclude: [
[getDirPath('../../node_modules')]
]
}
После завершения модификации зависимостей протестируйте эффект вместе, сначала проверьте зависимости проекта.node_modulesудалить все
повторно выполнитьfe-cli webpack, используя зависимости CLI для сборки этого проекта.
Видно, что проект можно нормально собрать с помощью CLI без установки каких-либо зависимостей в проекте.
В настоящее время зависимости и построение всех проектов переданы CLI, который может управлять зависимостями и строить процессы унифицированным образом.Если вам нужно обновить зависимости, вы можете использовать CLI для их обновления унифицированным образом. В то же время студенты, изучающие бизнес-разработки, не могут вносить изменения в зависимости от версии.
Это решение должно быть реализовано в соответствии с его собственными фактическими потребностями. Если все зависимости исходят от инструментов CLI, влияние обновлений версии будет очень большим и пассивным. Необходимо принять меры по обеспечению совместимости. Например, какие зависимости можно взять из проекта, а какие зависимости нужно сделать универсальными, сделайте выбор.
Слово для запутавшихся кодеров
Если вы столкнетесь со студентами, которые упомянули об этих проблемах в начале, они должны часто впадать в дело и не могут выбраться, а написание такого базового проекта действительно занимает много времени и скучно. Легко устать от работы и надоесть кодить.
Это нормально, у большинства людей есть этот опыт и подобные мысли, но я надеюсь, что вы сможете подумать об этом подробнее, вскучно, безвкусно, однообразноНайдите болевые точки и возможности в своей работе. Только будучи близко к бизнесу и зная его, мы можем иметь возможность оптимизировать, внедрять инновации и создавать.
Вся инфраструктура должна полагаться на бизнес, чтобы играть самую большую роль.
Перекачивая половину часа в день, думая о работе сегодня в том, что можно улучшить, не только повысить эффективность вашего кода может быть другим инструментом или ввести новые процессы.
В то же время не ограничивайтесь только этапом обдумывания. Если у вас есть идея, попробуйте ее реализовать. Уделите еще полчаса на кодирование или поиск инструмента. Все, что может повысить эффективность нескольких минут, даже если это небольшой инструмент, еще несколько строк кода и другой процесс, его тоже стоит попробовать.
Когда вы соберете все эти маленькие кусочки и идеи и, наконец, интегрируете их в систему, тогда вы обнаружите, что можете стоять на более высоком уровне, чтобы думать и планировать, что нужно сделать на следующем этапе. эти опыты являются краеугольным камнем вашего будущего роста.
Я всегда верил в одно предложение: тяжелая работа не подведет, и усилия в конечном итоге окупятся. Каждая строка кода, которую вы наберете на этом этапе, будет вашим шагом в будущем.
наконец
Инструменты CLI, представленные в этой главе, несовершенны.В качестве отправной точки для проектирования в будущем потребуются более функциональные итерации CLI.
Студенты, интересующиеся инженерным делом, могут обратить внимание на«Фронтенд Инжиниринг»Колонка, давайте построим систему DevOps, подходящую для команд.