Практическое руководство по автоматизации сборки веб-пакетов

React.js NPM Webpack Babel

Поскольку текущий блог создан с использованием WordPress, мне приходится часто изменять код, но модифицировать сторонний исходный код очень больно, поэтому я решил начать использовать React + Node.js/Python для разработки нового проекта блога. , и, наконец, заменить текущий код блога, его удобно поддерживать и обновлять в будущем, и он также может реализовать улучшение технологии саморазвития, архитектурного дизайна и способности решать проблемы. записывает весь процесс разработки, подводит итоги и делится ими, надеясь добиться прогресса среди читателей. В этой статье рассказывается, как использовать Webpack, Babel, Eslint, document.js и т. д. для создания среды разработки проекта и рабочей среды, что также считается подготовкой проекта. На следующем этапе планируется представить архитектуру и технологию проекта. выбор стека.

Нажмите здесь, чтобы просмотреть адрес исходного кода проекта

мой личный блог

npm VS Yarn

В этом проекте мы используем Yarn для управления трехсторонними зависимостями проекта, но не беспокойтесь, Yarn и NPM не конфликтуют и не заменяют NPM, Использование в основном такое же, и вам нужно только понять следующие моменты.

Управление версиями сторонних библиотек

И npm, и Yarn используютpackage.jsonДля отслеживания зависимостей проекта номер версии не всегда точен, потому что вы можете определить диапазон номеров версий, разные диапазоны обновлений npm могут привести к тому, что они будут одинаковыми.package.jsonНа машине файла установлены разные версии пакетов, что может вызвать некоторые различия и конфликты.

Есть ли у npm решение? Доступно в нпмnpm shrinkwrapСоздать файл блокировки версииnpm-shrinkwrap.json,существуетnpm installбуду читатьpackage.jsonСначала прочитайте этот файл, но когда версия пакета будет обновлена, файл блокировки версии не будет обновляться автоматически, нам придется снова выполнить его вручную.npm shrinkwrapкоманда для его обновления.

Итак, каковы преимущества пряжи? Yarn создает (или обновляет) каждый раз, когда добавляется или обновляется пакет установочной библиотеки.yarn.lockфайл, который гарантирует, что на всех машинах будет установлена ​​одна и та же версия пакета, поддерживая при этомpackage.jsonДопустимый диапазон версий определен в , отличие от npm в том, что Yarn всегда будет обновляться автоматически.yarn.lock, а npm нужно обновлять вручную.

одновременная установка

npm обычно устанавливает зависимости одну за другой последовательно, в то время как Yarn поддерживает параллельную загрузку и установку нескольких пакетов сторонних библиотек, каждый из которых работает быстрее и эффективнее.

Автономный кеш

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

Короче говоря, Yarn и npm используют почти одинаково, но его управление версиями более удобно, скорость установки быстрее, и у него больше преимуществ, но на самом деле все его трехсторонние адреса загрузки пакетов библиотек и npm унифицированы.

Webpack

Мы используем инструмент упаковки Webpack в качестве инструмента автоматизированного построения для проекта и управляем JavaScript, CSS, изображениями и другими ресурсами как модулями JavaScript (используя загрузчик Webpack для обработки преобразования) для унифицированного управления. , вы можете обратиться к:

  1. Webpack создает среду разработки приложений SPA
  2. Webpack модульно управляет такими ресурсами, как CSS и изображения.

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

Конфигурационный файл веб-пакета

Сначала создаем в корневом каталогеwebpack.config.jsКонфигурационный файл:

module.exports = function () {
  let env
  let _DEV_ = true // 开发环境
  let _PROD_ = false // 生产环境
  
  switch (process.env.NODE_ENV) {
    case 'dev':
      env = 'dev'
      _DEV_ = true
      _PROD_ = false
      break
    case 'production':
      env = 'prod'
      _DEV_ = false
      _PROD_ = true
      break
    default:
      env = 'dev'
      _DEV_ = true
      _PROD_ = false
  }
  // 根据环境参数动态决定引入对应配置文件
  return require(`./webpack/${env}.conf.js`)({
    ROOTPATH: __dirname,
    _DEV_,
    _PROD_
  })
}

согласно сprocess.env.NODE_ENVПараметры среды динамически решают загрузить соответствующий файл конфигурации:

  1. dev:нагрузкаwebpack/env.conf.jsконфигурационный файл;
  2. prod:нагрузкаwebpack/prod.conf.jsконфигурационный файл;

Мы создали его в корневом каталоге проектаwebpackкаталог, в котором создаются три конфигурационных файла:

  1. base.conf.js: базовый файл конфигурации, конфигурация, необходимая как в среде разработки, так и в производственной среде;
  2. dev.conf.js: конфигурационный файл среды разработки;
  3. prod.conf.js: Файл конфигурации упаковки производственной среды;

Конфигурация среды разработки

Некоторые конфигурации сборки для разработки определяются в файле конфигурации среды разработки, а затем для использования вводится базовый файл конфигурации.webpack-mergeТрехсторонняя библиотека объединяет конфигурацию среды разработки с базовым объектом конфигурации, а затем возвращается в среду разработки для упаковки и сборки объекта конфигурации в качестве параметра для упаковки и построения Webpack:

const webpackMerge = require('webpack-merge')
const PUBLICPATH = '/assets/'
const PORT = '9090'
let options = { /* ... */ }
module.exports = function (args) {
  options.ROOTPATH = args.ROOTPATH
  options.env = args.env
  return webpackMerge(require('./base.conf')(options), {
    devtool: 'source-map',
    devServer: {
      contentBase: path.join(args.ROOTPATH, './src'),
      historyApiFallback: true,
      inline: true,
      hot: true,
      port: PORT,
      proxy: {
        '*': `http://localhost:${PORT}/${PUBLICPATH}/`
      }
    },
    plugins: []
  })
}

Конфигурация производственной среды

Файл конфигурации производственной среды определяет конфигурацию сборки, используемую в производственной среде, а затем вводит базовый файл конфигурации, используяwebpack-mergeТрехсторонняя библиотека, объедините конфигурацию производственной среды с базовой конфигурацией, а затем верните объект конфигурации в качестве параметра для упаковки и сборки Webpack:

let options = { /* ... */}
module.exports = function (args) {
  options.ROOTPATH = args.ROOTPATH
  options.env = args.env
  return webpackMerge(require('./base.conf')(options), {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': 'production'
      }),
      // 生成独立css文件
      new ExtractTextPlugin({
        filename: 'css/[name].css'
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ]
  })
}

инструкция

Затем нужно настроить исполняемые инструкции для разных сред, мы используемnpm scriptsпуть вpackage.jsonКоманда выполнения конфигурации в файле:

{
  "scripts": {
    "start": "cross-env NODE_ENV=dev webpack-dev-server",
    "build": "cross-env NODE_ENV=production webpack"
  }
}
  1. start: Запустите команду в среде разработки, используйтеcross-envНастройки сторонних библиотекprocess.env.NODE_ENVдляdev, и откройте открытый сервер веб-пакета локально, чтобы облегчить открытие;
  2. build: Запустите команду в производственной среде, используйтеcross-envНастройки сторонних библиотекprocess.env.NODE_ENVдляproduction, который упакует выходной код и файлы ресурсов;

Наконец выполнитьyarn startа такжеyarn buildИнструкции могут быть упакованы отдельно для разработки и производства.

Babel

Компилятор общего назначения, который можно настроить и настроить, вам нужно явно указать, что вы ожидаете от Babel, установив **plugins (плагины)илиПресеты (также известные как набор плагинов)**, чтобы проинструктировать Babel, что делать.

конфигурационный файл

Во-первых, вам нужно создать файл конфигурации, то есть создать его в корневом пути проекта.babelrcдокумент. Затем введите следующее, чтобы начать:

{
  "presets": [],
  "plugins": []
}

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

babel-preset-es2015

Мы рассчитываем использовать в проекте синтаксис более новой версии ES6, но, поскольку все еще существует много сред JavaScript, которые не очень совместимы с ES6, Babel требуется для компиляции кода ES6 в код синтаксиса ES5, чтобы обеспечить область применения.

Выполните следующую команду, чтобы установить предустановку Babel «es2015»:

yarn add --dev babel-preset-es2015

Исправлять.babelrcКонфигурационный файл:

{
  "presets": [
    "es2015"
  ],
  "plugins": []
}

babel-preset-stage-num

Кроме того, все еще есть некоторые предложения для JavaScript, которые находятся в разработке и могут стать частью стандарта в ближайшем будущем, поэтому в настоящее время предлагаются эти проекты, содержание обновляется до тех пор, пока оно окончательно не станет стандартом, и процесс добавления в стандартную библиотеку разбито на 5 (0-4) этапы. В соответствии со статусом и содержанием предложения оно обновляется на различных этапах (от этапа 0 до этапа 3), и, наконец, на этапе 4 предложение официально принимается стандартом, конечно, предложение, которое не принято, не будет войти в этап 4.

Вот пресеты пакета на 4 разных этапах:

  • babel-preset-stage-0
  • babel-preset-stage-1
  • babel-preset-stage-2
  • babel-preset-stage-3

Примечание. Пресета stage-4 не существует, на самом деле он описан выше.es2015предустановлен.

Каждый из вышеперечисленных пресетов содержит последующий пресет post-stage, а также может содержать дополнительные функции. Например,babel-preset-stage-0Включатьbabel-preset-stage-1,babel-preset-stage-2,babel-preset-stage-3,а такжеbabel-preset-stage-1содержитbabel-preset-stage-2,babel-preset-stage-3Отжимайтесь по очереди.

Нажмите здесь, чтобы просмотреть подробный документ о содержании функций о каждой предустановке этапа.

Мы выбрали пресеты, которые поддерживают наиболее полные функции:

yarn add --dev babel-preset-stage-0

существует.babelrcВ файл конфигурации добавляем:

{
  "presets": [
    "es2015",
    "stage-0"
  ],
  "plugins": []
}

babel-preset-react

Наш проект предполагает использовать React для разработки, поэтому нам необходимо расширить поддержку синтаксиса React/JSX и установить пресеты:

yarn add --dev babel-preset-react

.babelrcВ файл конфигурации добавляем:

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
  "plugins": []
}

babel-polyfill

Пока с помощью Babel наш проект может поддерживать почти весь синтаксис ES6 и ES7, но он бессилен для нового JavaScript API, такого какSymbolЭтот новый API нельзя получить с помощью преобразования синтаксиса, поэтому нам нужен другой способ решить эту проблему.

Polyfill предлагается в отрасли для добавления дополнительного кода, чтобы текущая операционная среда поддерживала собственные API, которых не существует, и для расширения сферы использования API, которые все еще находятся в стадии разработки.

yarn add babel-polyfill

Не надо сюда добавлять--devпараметр.

Затем импортируйте его в запись файла:

import "babel-polyfill";

babel-runtime

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

Для реализации среды выполнения Babel необходимо установитьbabel-plugin-transform-runtimeа такжеbabel-runtime:

yarn add --dev babel-plugin-transform-runtime babel-runtime

затем обновите.babelrc:

{
  "plugins": [
    "transform-runtime",
  ]
}

Загрузка по запросу (babel-plugin-import)

Во многих случаях нам не нужен самодельный пользовательский интерфейс для развития бизнеса, и мы выбираем некоторые библиотеки компонентов с открытым исходным кодом для быстрой разработки и внедрения продуктов, таких как antd, weui, material-ui и т. д. Мы можем напрямую загружать все модули стороннюю библиотеку заранее, но много раз мы надеемся, что она может реализовать загрузку по запросу и уменьшить объем исходного пакета кода.На данный момент мы можем объявить в файле конфигурации babel загрузку сторонней библиотеки на спроса. Конечно, мы должны сначала установить плагинbabel-plugin-import:

yarn add --dev babel-plugin-import

затем в файле конфигурации.babelrcДобавьте конфигурацию в:

{
  "plugins": [
    "import",
    {
      "style": "../styles", // 加载样式解析方式，（值为true时，可能是less／Sass），此处值设为相对libraryName具体模块请求路径值
      "libraryDirectory": "", // 加载包的目录，(默认是lib，即node_modules/lib/)
      "libraryName": "material-ui" // 加载三方组件库名，当然另外需要安装该三方库
    }
  ]
}

На данный момент загрузчик webapck не может быть добавлен при обработке CSS.exclude: /node_modules/.

другие плагины

Мы также можем настроить установку плагинов в соответствии с реальными потребностями и увлечениями проекта.Для получения дополнительной информации см.Официальная документация плагина.

Рекомендовать здесьbabel-pliugin-transform-s2015-classesРасширения плагинов для реализации встроенных объектов класса JavaScriptextendsУнаследованные функции, см. документациюES2015 classes transform.

yarn add --dev babel-plugin-transform-es2015-classes

существует.babelrcДобавьте содержимое плагинов в файл:

{
  "plugins": [
    "transform-runtime",
    "transform-es2015-classes",
    [
      "import",
      {
        "style": "css",
        "libraryDirectory": "",
        "libraryName": "material-ui"
      }
    ]
  ]
}

Проверка грамматики (Эслинт)

Для обеспечения качества кода очень важно унифицировать стиль кода, полагаться на устное согласие команды явно неудовлетворительно, поэтому обычно необходимо выполнять определение синтаксиса кода на уровне автоматизированного построения. Существует множество инструментов обнаружения синтаксиса, таких как jslint и eslint, которые используются в настоящее время. Самый высокий показатель — eslint, поэтому наш проект также представляет eslint, сначала установите зависимости:

yarn add --dev eslint

Более подробная информациядокумент конфигурации, ниже кратко представлены основные.

конфигурационный файл

Затем создайте файл конфигурации eslint в корневом каталоге проекта..eslintrc, содержимое является объектом:

{}

Парсер (парсер)

Кроме того, ESLint по умолчанию используетEspreeВ качестве его парсера можно указать в конфигурационном файле другой парсер, например, babel-eslint, esprima и т. д. В нашем проекте используется babel-eslint:

yarn add --dev babel-eslint

добавить в конфигурационный файлparserАтрибуты:

{
  "parser": "babel-eslint"
}

eslint-plugin-babel

eslint также поддерживает дополнительные установочные плагины для расширения eslint, такие какeslint-plugin-babel, плагин работает сbabel-eslintСотрудничество, чтобы eslint мог лучше работать с babel одновременно, подробнее см.Справочная документация.

yarn add --dev eslint-plugin-babel

Добавьте объявление в файл конфигурации:

{
  "plugins": [
    "babel"
  ],
}

aslant-plugin-react

По умолчанию eslint определяет синтаксис языка JavaScript. Для таких фреймворков, как React/JSX, которые содержат собственный пользовательский синтаксис и синтаксический сахар, необходимо установить дополнительные плагины для использования в сочетании с eslint. Поэтому использование eslint для обнаружения синтаксиса, специфичного для React необходимо установить.eslint-plugin-reactПлагин:

yarn add --dev eslint-plugin-react

Добавьте файл конфигурации:

{
  "plugins": [
    "babel",
    "react"
  ]
}

Расширяет

В дополнение к пользовательским правилам проверки грамматики мы можем использовать интегрированный пакет расширений, предоставляемый Eslint, для использования общих объектов конфигурации обнаружения грамматики, таких какeslint-config-standardа такжеeslint-config-standard-react:

yarn add --dev eslint-config-standard eslint-config-standard-react eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react

Примечание. eslint-plugin-react, упомянутый в предыдущем разделе, включен сюда для поддержки пакета конфигурации eslint-config-standard-react.

затем в.eslintrcДобавьте расширение в файл конфигурации:

{
  "extends": [
    "standard",
    "standard-react"
  ]
}

Если вы не хотите использовать такие встроенные правила определения синтаксиса, вы можете удалить содержимое в файле конфигурации и удалить зависимости:

yarn remove eslint-config-standard eslint-config-standard-react eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react

Грамматические правила (правила)

Чтобы добавить правила грамматики, просто объявите вrulesобъект собственности, например:

{
  "rules": {
    "strict": 0,
    "semi": 2, // 强制语句末尾添加符号，否则报错
    "quotes": [
      1,
      "single"
    ],
  }
}

Структура правила

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

  • "off"или0- закрыть правила
  • "warn"или1- Включите правило для использования ошибок уровня предупреждения:warn(не приведет к выходу из программы)
  • "error"или2- Включите правило, чтобы использовать ошибку уровня ошибки:error(При срабатывании программа выйдет)
{
  "rules": {
  	eqeqeq: 0, // or "off"
  	curly: 2 // or "error"
  }
}

Некоторые правила также могут иметь дополнительные параметры конфигурации, которые можно указать с помощью массива, например:

{
  "rules": {
    "eqeqeq": "off",
    "curly": "error",
    "quotes": ["warn", "single"] // 开启使用单引号，若使用双引号将发出警告
  }
}

инструкция

Чтобы выполнить проверку синтаксиса, просто выполните./node_modules/.bin/eslint src(Проект устанавливает eslint локально, а не глобально, нужно указать путь выполнения скрипта), он пройдет проверкуsrcВсе файлы исходного кода в синтаксисе каталога и вывод результатов, конечно, нам, наконец, нужно поставить инструкции в соответствии сnpm scriptsканоническая вставкаpackage.jsonдокумент:

{
  "scripts": {
    "lint": "eslint --cache --fix src"
  }
}

При выполнении директив с помощью сценариев npm, независимо от того, установлен ли проект локально или глобально, путь к сценарию директивы можно опустить, так как npm автоматически сопоставит доступные пути.

Документация

Отличный проект, конечно, незаменим для документации. Документация может помочь другим разработчикам быстро понять содержание и ход всего проекта. Она также помогает находить контент и отслеживать источник при исправлении ошибок. Поэтому документация необходима. Поэтому, благодаря исследованиям я нашел JSdoc и JSdoc.documentation.jsПомогает автоматизировать производство документации по API.

documentation

а такжеJSdocТочно так же документация также автоматически создает проектную документацию на основе комментариев к коду, при условии, что наши комментарии к коду должны соответствовать их рекомендациям по спецификации.Обратитесь к документации JSdoc.

Сначала мы устанавливаемdocumentation.js:

yarn add --dev documentation

инструкция

Затем можно выполнить команду:

./node_modules/.bin/documentation build src/app.js -f md > API.md

Вы обнаружите, что файл API.md выводится в корневом каталоге.

Настраиваем в файле package.jsonnpm scriptsВыполните скрипт:

"scripts": {
  "doc": "./node_modules/.bin/documentation build src/app.js -f md > API.md"
}

Когда документация установлена ​​локально в проекте, нужно указывать при выполнении команды прямо в терминале командной строки./node_modules/.bin/documentationПуть, если он установлен глобально, его можно использовать только напрямуюdocumentationинструкция. Чтобы выполнить шаги в package.json, вы можете напрямую сократить его, и npm автоматически сопоставит его для нас.

Нажмите здесь, чтобы просмотреть адрес исходного кода проекта

Категории