Первый взгляд на React, шаг за шагом

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

No.1🕳 Проект React вводит такие ошибки, как изображения, меньше, css и т. д.

Для проектов веб-пакетов, созданных вручную, поначалу у вас может быть не так много загрузчиков!

Поэтому вам необходимо установить различные загрузчики, такие какзагрузчик стилей,css-загрузчик,url-loader

существует
Добавьте по правилам модуля в build/webpack.base.js:

{
   test: /\.css$/,
   loader: 'style-loader!css-loader',
   exclude: [
      path.resolve(__dirname, '../node_modules')
   ]
},
{
   test: /\.(png|jpg|gif|jpeg)$/,
   loader: 'url-loader?limit=8192',
   exclude: [
      path.resolve(__dirname, '../node_modules')
   ]
 }

Таким образом, изображения и CSS могут быть импортированы.Я использовал строительные леса для создания проектов раньше, и я не знаю, что даже эти самые основные введения нужно настраивать с помощью загрузчика...

№2 🕳Как вводить изображения в проекты React

Разве это не просто представить картинку, я просто подойду

<img src="../../assets/logo.png" alt="." />

оказаться, в чем дело?

Я проверил интернет и обнаружил, что причина в том, что React и ES6 тесно связаны, а es6 не поддерживает путь для прямой записи картинок в тег , что мне делать? ?

  1. метод импорта:

    import logo from '../../assets/logo.png'

<img src={logo} alt="" />
  2. требуется метод:

    <img src={require('../../assets/logo.png')} alt="" />

№3 🕳 Файл в node_modules не загружается, например, при введении Antd плагин Katex сообщает об ошибке

Это потому, что первая яма не была засыпана, давайте посмотрим, как она была написана только что:


Вы видели, что исключить, исключить! Эти загрузчики отбрасывают файлы в node_modules, вы можете не сообщать об ошибке, поэтому удалите это предложение и добавьте «белый список» в каталог папки, соответствующий пакету npm, который вам нужен для использования загрузчика, следующим образом:


Это обеспечит нормальную загрузку файлов в пакете NPM.

№4 🕳 Не удалось импортировать локальный файл iconfont

Если он будет введен в app.js в начале, он не вступит в силу


У вас не установлены всевозможные загрузчики, что вы хотите сделать?

Оказывается, это все упакованные файлы! Чтобы упакованный стиль вступил в силу, вам нужно использовать подключаемый модуль extract-text-webpack-plugin для отдельной упаковки файла стиля, а упакованный выходной файл указывается атрибутом вывода в файле конфигурации.

Webpack рассматривает все статические ресурсы как модули, такие как CSS, LESS, JSX, изображения, шрифты и т. д., чтобы ими можно было управлять единообразно. Webpack представлен для этогопогрузчика такжеИзвлечьтекстовый плагин.

Плагины и загрузчик имеют схожие функции, оба являются программами обработки файлов, но в отличие от загрузчика, это не программа обработки для определенного типа файла, а программа обработки, которая работает в более широком измерении всего процесса упаковки. Например, плагин сжатия js UglifyJsPlugin сжимает упакованный код js. (цитировать блоггера CSDN здесьdoomliu)

Не так много BB, давайте посмотрим, как его использовать!


Таким образом, на него можно нормально ссылаться в проекте (его все еще нужно ввести в app.js).

№5 🕳 Лучше не использоватьMarterial-UI

Почему?Потому что все компоненты этой библиотеки пользовательского интерфейса являются встроенными стилями! В линию! Таким образом, вы не можете изменить стиль. Даже не класс.

Настоятельно рекомендую Антд, китайский, Али, без проблем.

Что касается Antd, для импорта по требованию рекомендуется использовать babel-plugin-import, что экономит производительность и очень удобно.

Первый cnpm i babel-plugin-import --save-dev

затем изменить.babelrcдокумент

{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

Затем вы можете использовать его напрямую


В противном случае вы должны написать:


№6 🕳 О ESlint. . .

Я часто теряю дар речи от ESlint, и есть какие-то необъяснимые требования.Например, когда я создаю тег в процессе разработки, если он пустой, я сообщу об ошибке.Брат, нельзя ли сделать это пошагово шаг?Ограничения сняты!

После установки ESlint в вашей папке автоматически создается файл .eslintrc. Вы можете увидеть много подобных правил в файле .eslintrc:


На самом деле просто написано:

"no-console": [0],

0 — закрытое правило, 1 — предупреждение, 2 — ошибка

Кроме того, если вы импортируете внешний js-файл, а в нем сотни ошибок, а менять его не хочется, что делать?

Создайте новый .eslintignore в корневом каталоге, и все готово!


№7 🕳 Браузер Judge 360

Теперь браузер 360 становится все труднее отличить.После определенного обновления браузера 360 строка, отображаемая ядром, такая же, как у браузера IE, но иногда в нем все еще есть ошибки, которые IE не имеет...

is360() {
    //application/vnd.chromium.remoting-viewer 可能为360特有
    let is360 = _mime('type', 'application/vnd.chromium.remoting-viewer')
    if (isChrome() && is360) {
      return true    //是360浏览器
    }
    //检测是否是谷歌内核(可排除360及谷歌以外的浏览器)
    function isChrome() {
      let ua = navigator.userAgent.toLowerCase()
      return ua.indexOf('chrome') > 1
    }
    //测试mime
    function _mime(option, value) {
      var mimeTypes = navigator.mimeTypes
      for (var mt in mimeTypes) {
        if (mimeTypes[mt][option] === value) {
          return true
        }
      }
      return false
    }
 }

Еще одна мелочь...


Теперь, когда разработка проекта завершена, единственное ощущение, что мне нужно читать больше книг и чистить больше официальных документов.Для React у меня есть только мех, а меха еще нет. Есть еще Webpack, который нужно изучать систематически!

Учиться всю жизнь!


Категории