мимо
15 лет назад было полно отгрузок, в то время в команде фронтенда было всего 2 человека, а сопутствующие инструменты для упаковки еще не использовались, мы провели рефакторинг процесса разработки фронтенда, внедрили vue как базовую разработку framework и использовали fis3 для упаковки проекта. В связи с быстрой итерацией проекта и увеличением публичных библиотек мы внедрили webpack и сотрудничали с npm для разделения базовой библиотеки, что удобно для обслуживания и управления. В то же время это также приносит новую проблему, то есть среда разработки интерфейса становится все более и более сложной.
Я помню фронтенд-разработку в прошлом, когда говорили, что блокнот может писать html. Теперь, когда сложность проекта возрастает, вам необходимо установить vscode, node, webpack и т. д., чтобы разрабатывать, упаковывать и другие инструменты. Как правило, для новых сотрудников мы устанавливаем соответствующую среду в соответствии со следующими 4 шагами. Чувствовать
1:下载node安装
// 基础库
npm install yarn -g
yarn global add nrm
nrm use taobao
yarn global add cooking-cli@1.5.3
yarn global add rmdir
yarn global add cross-env
yarn global add rimraf
cooking import autoprefixer
cooking import less
cooking import lint
cooking import vue
cooking import vue2
//内部打包上传发布工具
nrm add _131 http://xxx.xxx.xxx.xxx:4873
nrm use _131
yarn global add ymm_build
// 老的fis3项目依赖包
yarn global add fis3@3.4.25
yarn global add fis3-hook-module@1.2.2
yarn global add fis3-hook-relative@1.0.7
yarn global add fis3-parser-less-2.x@0.1.4
yarn global add fis3-postpackager-loader@1.3.19
2:clone项目代码
3:yarn install 安装项目依赖
4：npm run dev运行开发项目
Команда изначально была небольшой. Скорость новых членов не быстро. Помощь новым сотрудникам прийти и установить среду также способствует общению, все чувствует себя хорошо. Прошло больше года.
Людей становится все больше, команда растет все быстрее и быстрее.Каждому новому ученику приходится давать покататься старому водителю.Получается, что количество счастливых вещей иссякнет, а придет самое страшное. время для установки среды варьируется от человека к человеку. В результате некоторые глобальные наборы инструментов имеют незначительные различия в версиях. Некоторые необъяснимые проблемы, с которыми иногда сталкиваются новые сотрудники, вызваны несовместимостью среды. Вот тогда я стал обращать внимание. Раньше в npm не было механизма блокировки версий. Специально для некоторых глобальных библиотек инструментов у каждого свой набор, а также есть набор на упаковочной машине в онлайн-среде. Во многих случаях разработка хороша, но когда она упакована и выпущена в Интернете, могут возникнуть ситуации, которые не совпадают с ожидаемыми. Боль больше раз.
Подумайте, как вы можете унифицировать среду разработки фронтенд-команды. Сухие товары ниже
использовать
Введение в докер
Введение в энциклопедию Baidu: Docker — это механизм контейнера приложений с открытым исходным кодом, который позволяет разработчикам упаковывать свои приложения и зависимости в переносимый контейнер, который затем можно распространять на любую популярную машину Linux, а также можно виртуализировать. Контейнеры полностью изолированы и не будут иметь никакого интерфейса друг с другом.
- клиент dockerClient
- Демон Docker Daemon
- Изображение образа Docker
- Контейнер DockerContainer
Одна команда использует вышеперечисленные 4 части, и эта команда также чаще всего используется позже.
docker run -v "$(PWD)":/data -p 8000:8000 harbor.ymmoa.com/h5/ymmbaseup npm run dev
Отправьте команду запуска в dockerDaemon через dockerclient, и dockerDaemon создаст контейнер через образ harbour.ymmoa.com/h5/ymmbaseup для запуска команды npm run dev. Контейнер предоставляет порт 8000 и связывает $(PWD) (локальный каталог) с каталогом /data внутри контейнера.
На этот раз вы можете просто понять, что docker может упаковать пакет зависимостей, установленный linux+node+npm, в образ, а затем, после установки docker на другие компьютеры, вы можете быстро загрузить этот образ на компьютер для использования, и мы поговорим о том, как использовать его позже. Чтобы упростить задачу, вы относитесь к упакованному докер-образу как к приложению, и каждый компьютер может загрузить и запустить его. Давайте сначала поймем это так, если вы думаете, что то, что я сказал, недостаточно ясно, вы можете спросить Ду Ньянга.
установка докера
Для ускорения рекомендуется использовать Alibaba Cloud https://dev.aliyun.com/search.html
докер сделать зеркало
Создайте Dockerfile.
新建一个目录，并在里面创建Dockerfile文件。内容如下
## 指定这个镜像的基础是什么，我们选择了node: 8.9.3这个版本作为基础镜像
FROM node:8.9.3
MAINTAINER stoneship stoneship <258137678@qq.com>
##安装node相关依赖
RUN \
npm install yarn -g \
yarn global add nrm && \
nrm use taobao &&\
yarn global add vue-cli &&\
yarn global add cross-env
## 安装nginx
## 安装数据库...
## 创建一个目录
RUN mkdir /data
## 指定命令运行的目录
WORKDIR /data
В частности, каждая инструкция запуска выполняется на текущем базовом образе, и фиксируется новый образ. Если команда длинная, вы можете использовать «/» для переноса строки. Здесь, в этой демонстрации, мы упаковали некоторые инструменты, зависящие от узла.Вы можете добавить свою собственную команду запуска, чтобы получить зависимости, необходимые вашей среде.
построить образ
Запустите следующую команду сборки в каталоге Dockerfile, параметр -t указывает имя созданного образа.
docker build -t dockerdemo .
После успешной сборки вы можете запросить список зеркал с помощью следующей команды
docker images
загрузить на сервер
В настоящее время запакованный образ находится только на вашем компьютере. Если вам нужно, чтобы этим зеркалом пользовались другие, самый удобный способ — загрузить свое зеркало на сервер. Загрузите с помощью следующей команды
docker push dockerdemo:latest
Использование и упакованные образы
Мы запаковали vue-cli в образ dockerdemo. Попробуем создать проект через vue-cli в образе deckerdemo. Учтите, что сеть медленная. Загрузка проекта шаблона через vue init webpack-simple my-project может завершиться ошибкой. Это только демонстрирует, как использовать докер для запуска связанных команд. Вы можете попробовать запустить другие команды.
docker run -v "$(PWD)":/data dockerdemo vue init webpack-simple my-project
Краткое объяснение: приведенная выше команда означает, что docker создает контейнер с помощью образа dockerdemo, связывает текущий каталог с каталогом /data контейнера и запускает команду vue init webpack-simple my-project в каталоге, и вы можете также запускать другие команды.
Модернизация существующих проектов для адаптации
После того, как у вас есть унифицированный образ среды для вашего собственного проекта и вы знаете, как использовать docker для запуска команд, исходная разработка проекта и упаковка передаются через npm run. Теперь доступен для запуска через докер. Введите команду
docker run -v "$(PWD)":/data dockerdemo npm run dev
docker run -v "$(PWD)":/data dockerdemo npm run dist
....
Эти команды могут быть интегрированы с make-файлами или файлами .bat. Теперь makefile был скорректирован для фронтенд-проекта Yunmang. Ссылку можно сделать следующим образом
Теперь команда для упаковки нашего проекта изменилась с исходного npm run build_dist на make build_dist (Makefile.bat build_dist в win), но простое изменение заключается в использовании другого контейнера Docker для упаковки, и среда унифицирована. Структура среды через докер показана ниже. может чувствовать
Суммировать
После использования Docker, чтобы построить единую среду разработки в передней части, шаги для новичков для установки среды становятся следующими тремя шагами, и не будет проблем с различными версиями среды разработки, почувствуйте его.
- установить докер
- клонировать код, установить зависимости проекта
- Затем запустите проект напрямую через док-контейнер или упакуйте проект.
Автор: Ван Куньмин