webpack frames

Значок

• проверить && формат
• веб-пакет1-ie8
• вебпак3-реагировать
• веб-пакет3-вю
• вебпак4-реагировать
• webpack4-vue

Инструкции по обновлению

1. Папки, содержащиеся в webpack4-vue и webpack3-vue абсолютно одинаковы. При необходимости скопируйте их самостоятельно.
2. Папки, включенные в webpack4-react и webpack3-react абсолютно одинаковы. При необходимости скопируйте их самостоятельно.
3. Разница между веб-пакетом 2 и 3 очень мала. В принципе, заменить 2 на 3 напрямую не составляет труда. Здесь обсуждаются только версии 1/3/4, официальный документ по миграции.
4. Среда разработки была перезагружена. Если вы хотите, чтобы среда разработки была совместима с ie11 или более ранней версией, отключите горячую перезагрузку.
   • Удалите react-hot-loader/babel из файла plugins .babelrc
   • Удалите react-hot-loader из devDependencies в package.json
   • devServer.inline в config/opt.dev.js должен иметь значение false (vue нужно только изменить этот момент)
   • Удалить react-hot-loader из кода
5. Среда разработки уже поддерживает интерфейсный mock api , который автоматически читает файлы в src/mock и выполняет горячие обновления. Логика кода находится в config/mock.js , который содержит example .
6. Версии vue и vue-template-compiler должны быть полностью согласованы, иначе возникнут непредвиденные ошибки.
7. Конфигурации webapck134,react,vue в каталоге config были унифицированы. Для разных проектов достаточно изменить только opt.self.js
8. В описании readme есть пропуски. Пожалуйста, перейдите к файлу, чтобы прочитать комментарии к коду. Ключевым моментом является то, что файлы в каталоге config имеют комментарии и официальные адреса справочных документов.
9. devDependencies используются для размещения dependencies заблокированной версии. Поскольку их не нужно публиковать в npm, эта классификация более произвольна и даже неверна. Если вы хотите опубликовать, пожалуйста, сделайте различие. Baidu для получения более подробной информации.
10. Поскольку DllPlugin и CommonsChunkPlugin或splitChunks имеют дублирующие функции, и первый требует предварительного выполнения команды веб-пакета, его можно просто заменить externals . Последний имеет большое рабочее пространство и может свободно распаковываться, чтобы сделать размер файла более однородным. , следующий DllPlugin больше не будет использоваться

Экологическая подготовка

1. Установить npm config set registry https://registry.npm.taobao.org
2. Запустите npm i -g npminstall от имени администратора.
3. Введите текущий каталог с помощью командной строки и запустите npminstall -c
4. В случае возникновения ошибки общие решения следующие:
   • Запустите npm cache clean -f и npm cache verify -f от имени администратора.
   • Удалить каталог node_modules
   • Перезапустите npminstall -c
   • Наконец, перейдите на лучшую сеть и обновите node и npm
5. Примечания по использованию:
   • npminstall -c и npm install несовместимы. Первый вариант намного быстрее второго, но их нельзя использовать вместе.
   • Для перехода на использование необходимо удалить папку node_modules
   • Если возникла проблема с node-v12.0.0 , пока не обновляйте ее. В последней версии node-v12 проблем нет.
   • Иногда возникают необъяснимые ошибки упаковки или ошибки кодирования. Удалите node_modules и повторите попытку.

Стартап среды разработки

1. npm start
   • Пожалуйста, используйте его, когда вам нужна поддержка, т.е.
   • npm run env -- FOR_IE=1 npm start
2. Откройте http://localhost:8888 в браузере.

Развертывание производственной среды

1. npm run app
   • Пожалуйста, используйте его, когда вам нужна поддержка, т.е.
   • npm run env -- FOR_IE=1 npm run app
2. Просто скопируйте содержимое папки dist на сервер

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

1. npm run report для просмотра состава пакета производственного пакета
   • Пожалуйста, используйте его, когда вам нужна поддержка, т.е.
   • npm run env -- FOR_IE=1 npm run report
2. npm run debug добавляет запуск отладки точки останова, порт 7777
   • Пожалуйста, используйте его, когда вам нужна поддержка, т.е.
   • npm run env -- FOR_IE=1 npm run debug

Обновить package.json

• Установите npm i -g npm-check-updates
• Выполните ncu (просмотр) ncu -u (обновление) в каталоге package.json .

Используйте горячую перезагрузку React-Hot-Loader

Официальная документация

1. Добавьте react-hot-loader в devDependencies в package.json
2. devServer.inline файла webpack.cfg.dev.js должен иметь true
3. Добавьте react-hot-loader/babel в plugins .babelrc
4. Добавьте --hot в команду запуска, не используйте одновременно HotModuleReplacementPlugin
5. Корневой компонент export модифицируется, и перед реагированием вводится react-hot-loader react

 import { hot } from 'react-hot-loader' ;
export default hot ( module ) ( App ) ;

Примечание. Только версия 4.3.12 поддерживает ie8+react@0 и требует небольшого изменения, которое уже сделано в скрипте.

Обработка изображений

• Обычная картинка => https://tinypng.com图片压缩=> url-loader (до 4кб)
• изображение svg => https://github.com/svg/svgo svg压缩=> svg-url-loader

 // 建议4kb以下使用,较大文件建议用file-loader
const src = require ( "!svg-url-loader?noquotes!./x.svg" ) ;

webpack 3 4 поддерживает исследования ie8

1. Код, упакованный DllPlugin, не был преобразован и, скорее всего, имеет проблемы несовместимости, поэтому скорость упаковки не может быть значительно улучшена.
2. Принцип горячей перезагрузки — Object.defineProperty, который не поддерживается ie8.
3. Невозможно использовать последнюю версию реакции/antd, реакция @0.x/[email protected] поддерживает только ie8, но не поддерживает ie8 напрямую;
4. На данный момент почти все преимущества webpack 3 4 не поддерживаются. Webpack 3 4 пока не рассматривается, а совместимость онлайн-версии не очень хорошая.
5. Если вы действительно хотите использовать веб-пакет 3 4 для совместимости с ie8, следующие материалы предоставлены для справки, но не были протестированы (у всех должны быть проблемы)
   • https://github.com/ediblecode/webpack4-ie8
   • https://github.com/natural-fe/natural-cli/blob/master/ie8-mvvm.md

Справочная информация по спецификации кода

• http://eslint.cn/docs/rules eslint规则文档
• https://github.com/yuche/javascript js规范中文版
• https://github.com/airbnb/javascript js规范es5,es6,react
• https://github.com/JasonBoy/javascript/tree/master/react react规范中文版
• https://github.com/sivan/javascript-style-guide/tree/master/es5 es5规范中文版
• Часто используемые конфигурации esling eslint-config-egg eslint-config-react-app eslint-config-ali

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

Об оставлении пустой строки в конце файла

• Люди следуют своим привычкам, а командная разработка унифицирована с помощью автоматического eslint --fix

Об отступах кода

• Люди следуют своим привычкам, а командная разработка унифицирована с помощью автоматического eslint --fix
• Между табуляциями и пробелами ведутся бесконечные споры: если вы не следите за выравниванием разрыва строки attr в HTML и выравниванием через двоеточие в CSS, в табуляции нет ничего плохого, если вы хотите добиться выравнивания, лучше использовать пробелы;

О кавычках

• js объединяет двойные кавычки, двойные кавычки внутри строки объединяются " , одинарные кавычки x27 , двойные кавычки x22 , поэтому двойные кавычки являются едиными
• CSS объединяет двойные кавычки, а содержимое содержимого необходимо экранировать, чтобы предотвратить искажение символов.
• css/less/scss, во многих случаях вместо одинарных кавычек можно использовать двойные кавычки, а в некоторых случаях одинарные кавычки могут вызывать проблемы при компиляции. Кроме того, в тегах html также используются двойные кавычки, что бывает унифицировано.

Добавлять ли запятую

• Если синтаксических ошибок нет, то добавьте, тогда будет меньше изменений diff.

Добавлять ли точку с запятой

• Если синтаксических ошибок нет, то добавьте, тогда будет меньше изменений diff.

Об определении переменных

• Если она определена отдельно, по одной переменной в строке, приоритет отдается const и вместо var используется let.
• Если возможно, используйте для присваиваний деструктуризацию объектов или массивов.

О порядке импорта

• Наивысшим приоритетом является внедрение полифилла, за которым следует React/Vue.
• Во-вторых, в каталоге модулей (node_modules) сначала сортируется глубина пути модуля, а порядок классифицируется и сортируется в соответствии с (компонент>функция>константа).
• Затем он загружается через загрузчик, например: обещание-загрузчик
• Затем есть каталог разработки (dev_dir), который классифицируется и сортируется в соответствии с (компонент>функция>константа).
• Представляем файлы стилей, классифицируем и сортируем их в соответствии с (node_modules>dev_dir)
• Импортируйте файлы изображений, классифицируйте и сортируйте их по (node_modules>dev_dir)