Создание веб-приложения с нуля

JavaScript Vue.js Yarn NPM Webpack

В последнее время исследования конфигурации веб-пакетов раздражают, и инструмент упаковки может быть заменен в один прекрасный день. Нелегко вручную создать сложную структуру веб-пакета для приложения.Взгляните на файлы конфигурации веб-пакета vue-cli, там более 8 файлов конфигурации веб-пакета, используется более 14 плагинов и более 800 строк кода. Вы должны понять так много «правил», прежде чем начать писать код, лучше потратить больше времени на изучение ядра js, и однажды вы сможете придумать свои собственные инструменты. Чтобы неоднократно наступать на яму, или записывать процесс адаптации к этим правилам, обычно в инструментальных документах это содержание обычно не освещается. Не будьте инженером по сборке инструментов, а используйте инструменты.

1. Подготовка среды (автор - среда windows)

1.1. Установить узел

Чтобы установить узел, перейдите кОфициальный сайт, узел поставляется с npm. После завершения установки откройте cmd и введите следующую команду, чтобы проверить, прошла ли установка успешно:

node -v
npm -v

error1:nodeКоманда не отвечает

решить:удалятьnpmв каталогеnpmrcдокумент.

1.2. Инициализировать проект

бегатьnpm initИнициализируйте проект в соответствии с подсказкой, сгенерируйтеpackage.jsonдокумент

Уведомление: имя папки корневого каталога проекта не может использовать пробелы, иначе проект сообщит об ошибке.

error1:npmКоманда не отвечает

решить:удалятьnpmв каталогеnpmrcдокумент.

error2: Глобальная ошибка установки: нет разрешения или команда npm не отвечает

решить: Обрати внимание наnodePATHИзмените его на место с разрешением, иначе могут возникнуть проблемы с разрешением при использовании командной строки для глобальной установки пакета.

  • Проверьте переменные среды и node_path
  • Просмотрите глобальный путь установки по умолчанию:npm config get prefix
  • Добавлено в путь установки узлаnode_globalа такжеnode_cache2 папки
  • Измените глобальный путь установки по умолчанию:

npm config set prefix 'C:\Users\Administrator\node\node_global' npm config set cache 'C:\Users\Administrator\node\node_cache'

  • Еще раз проверьте глобальный путь установки по умолчанию.
  • Изменить переменные среды
    • Пользовательские переменные -NODE PATHа такжеPATHДобавить в: C:\Users\Administrator\node\node_global
    • Системные переменные -PATHДобавить: C:\Пользователи\Администратор\узел\node_global
  • Перезапустите cmd, путь вступит в силу

error3:неожиданный токен {} в json на позиции 403

решить: удалить файл package.json.lock.

2. Управление пакетами

2.1. Установите пряжу

Рекомендуемая установкаyarnДля контроля версий установите пряжуофициальная документация. Инструкции по установке:

yarn init  // 初始化项目，生成yarn.lock文件
yarn add [pakeage] --dev // --dev 只在开发环境下使用的插件
yarn (install) // 安装lock文件中所有的依赖

error1: установленыyarn, бегатьyarn installОтчет об ошибках не может быть использован!

решить:Пучокyarnв папке установкиbinДобавьте папки в переменную среды.

2.2. Установкаcnpm, домашнее зеркало нпм (опционально)

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. Леса

3.1 Быстро строятся леса vue-cli

  • Установить глобально:npm install -g vue-cli;
  • Проверяем успешность установки:vue -V;
  • Инициализируйте проект:vue init webpack my-project;
  • Не используйте егоnight watch, демонстрационные зависимости внутриgoogleРесурсы недоступны в Китае, и при запуске проекта будет сообщено об ошибке Описание официального веб-сайта: приведенный ниже тест переходит на google.com и ищет «rembrandt van rijn», а затем проверяет, является ли термин первым результатом на странице Википедии. Рембрандта.

3.2 Простота создания проекта веб-пакета без использования vue-cli для справки

Официальный сайт webpack собирает проект webpack за 5 секунд.

  • установить вебпак,npm install --save-dev webpack

  • настроитьwebpack.config.jsдокумент

 const path = require('path');
 module.exports = {
     entry: './src/app.js',（主文件自己定义）
     output: {
         path: path.resolve(__dirname, 'bin'),
         filename: 'app.bundle.js'
     }
 };

  • Настроить локальную службу Установить клиентский серверnpm install webpack-dev-server;

    Начало проектаwebpack-dev-server --content-base build/;

В-четвертых, установите различные необходимые пакеты

4.1. Общий пакетный портал

4.2. Инструкция по установке

Только в использовании пакета среды разработки используется: - Save-devnpm install --save-dev 包名

Пакеты для использования в продакшене: --savenpm install --save 包名

4.3. Скомпилируйте ES6 или выше, используйте babel

  • cnpm install --save-dev babel-cli babel-preset-env
  • cnpm install --save-dev babel-loader
  • npm install --save-dev babel-polyfill

Официальный сайт объясняет причину установки babel-polyfill: Babel компилирует только синтаксис ES6, такой как стрелочные функции, с помощью babel-polyfill можно компилировать некоторые глобальные переменные, такие как Promise, и некоторые новые нативные функции, такие как String.padStar.Since Babel only transforms syntax (like arrow functions), you can use babel-polyfill in order to support new globals such as Promise or new native methods like String.padStart (left-pad). It uses core-js and regenerator. Check out our babel-polyfill docs for more info.

4.4 создайте файл .babelrc (если он уже создан, создавать его не нужно)

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

5. Некоторые полезные настройки

5.1 Переадресация интерфейсаproxytable

В среде разработки сложные URL-адреса можно упростить, настроив сопоставление адресов, а также решить междоменные проблемы.

    // config/index.js
        proxyTable: {
            '/api': {  //将请求路径中包含api全部转发到下面配置的target路径中
            target: 'http://127.0.0.1:3000', // 你接口的域名或ip
            // secure: false,      // 如果是https接口，需要配置这个参数
            changeOrigin: true,     // 如果接口跨域，需要进行这个参数配置
            pathRewrite: {
            '^/api': ''
        }
    }},

5.2 Конфигурация URL производственной среды (среда разработки, онлайн)

let devUrl = 'api/asset/'; //与上面proxytable中配置的api路径匹配
let proUrl = 'https://node.xxxx.com/asset/';
(curEnv == "production") ? (baseUrl = proUrl) :( baseUrl = devUrl);

5.3 Модули загружаются по запросу

использоватьvue-cliПостроенный проект по умолчанию выполняетсяnpm run buildВесь код js будет упакован как единое целое, Расположение упаковки — dist/static/js/app.[contenthash].js. Этот файл очень большой, возможно, несколько мегабайт, что серьезно влияет на производительность страницы.

Когда модули вводятся в файл маршрутизации, модули упаковываются, а компоненты, которые мы хотим объединить, упаковываются в один.chunk块Иди, используй Webpackrequire.ensure, а в конце добавитьchunkимя, то же самоеchunkИменованные модули будут упакованы вместе.

router/index.js
const lotteryIndex = r => require.ensure([], () => r(require('@/pages/lottery/lottery-index.vue')), 'chunk1')
const drawList = r => require.ensure([], () => r(require('@/pages/lottery/draw-list.vue')), 'chunk2')
const drawDetail = r => require.ensure([], () => r(require('@/pages/lottery/draw-detail.vue')), 'chunk3')
Категории