предисловие

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

Тема этого поста — понимание vue-cli. Возможно, когда многие люди будут разрабатывать vue, мы обнаружим проблему — только использовать его, но не понимать, что в нем. Можно сказать, что текущий фреймворк достаточно хорош, так что разработчикам не нужно беспокоиться о создании среды разработки. Но иногда нам приходится возвращатьсяпервобытная жизньТолько испытав это, вы сможете улучшить себя до более высокого уровня, и я надеюсь, что каждый сможет поделиться этим. Если вам понравилась моя статья, добро пожаловать в комментарии, добро пожаловать в Star~. Добро пожаловать, чтобы следовать за мнойблог на гитхабе

текст

Во-первых, давайте поговорим о том, что устанавливать! Для того, чтобы иметь начало и конец, это все еще вопрос нескольких слов. Действуйте следующим образом:

• Установить vue-кли

  npm install vue-cli -g

• Установить каталог с шаблоном веб-пакета

  vue init webapck webpack-template

После этого мы можем использовать IDE, чтобы открыть каталог.

Здесь указана версия 2.9.2 моего vue-cli, чтобы не вводить читателей в заблуждение после последующей доработки.

После этого прикрепите скриншот собственной директории без внесения каких-либо изменений, как показано на рисунке:

Прежде всего, первый вопрос, с чего начать? Конечно, все начинается с webpack.base.conf.js. Это то, что будет загружаться как в среде разработки, так и в среде производства. Затем мы можем начать с просмотра нескольких файлов, которые будут использоваться в webpack.base.conf.js. На самом деле в базе используются следующие файлы, как видно из кода:

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

Они есть:

• путь [модуль пути]
• файл utils.js в каталоге сборки
• индексный файл в каталоге конфигурации
• файл vue-loader.conf.js в каталоге сборки

путь путь

Этот модуль можно увидеть на официальном сайте nodejs.По сути, это такой модуль, как получение и настройка пути к файлу.При изучении узла мы часто видим, что этот модуль часто используется.

Модуль path предоставляет утилиты для управления путями к файлам и каталогам.

utils.js

Мы можем пойти туда и посмотреть на код.На самом деле, мы можем сделать вывод из названия, что он может предоставлять методы для всего скаффолдинга. Сначала мы можем взглянуть на файл ресурсов, на который ссылается заголовок:

const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

Точно так же он также цитируетмодуль путии файл index.js в каталоге config, за которым следует пакет npm -- extract-text-webpack-plugin. Этот пакет используется для разделения содержимого css и js. Мы можем узнать больше об этом позже. В то же время это также относится к файлу package.json, который является файлом json и после загрузки станет объектом.

Итак, нам нужно начать с его зависимостей заголовка:

Мы уже упоминали модуль пути, поэтому я не буду вдаваться в подробности. Мы можем проанализировать файл index.js в каталоге config.

index.js

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

Из кода видно, что объект экспортируется через module.exports, который содержит две настройки dev и build.

В dev задаются некоторые конфигурации, и код выглядит следующим образом:

modules.exports = {
	dev: {
	
	    // Paths
	    assetsSubDirectory: 'static',
	    assetsPublicPath: '/',
	    proxyTable: {},
	
	    // Various Dev Server settings
	    host: 'localhost', // can be overwritten by process.env.HOST
	    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
	    autoOpenBrowser: false,
	    errorOverlay: true,
	    notifyOnErrors: true,
	    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
	
	    // Use Eslint Loader?
	    // If true, your code will be linted during bundling and
	    // linting errors and warnings will be shown in the console.
	    useEslint: true,
	    // If true, eslint errors and warnings will also be shown in the error overlay
	    // in the browser.
	    showEslintErrorsInOverlay: false,
	
	    /**
	     * Source Maps
	     */
	
	    // https://webpack.js.org/configuration/devtool/#development
	    devtool: 'eval-source-map',
	
	    // If you have problems debugging vue-files in devtools,
	    // set this to false - it *may* help
	    // https://vue-loader.vuejs.org/en/options.html#cachebusting
	    cacheBusting: true,
	
	    // CSS Sourcemaps off by default because relative paths are "buggy"
	    // with this option, according to the CSS-Loader README
	    // (https://github.com/webpack/css-loader#sourcemaps)
	    // In our experience, they generally work as expected,
	    // just be aware of this issue when enabling this option.
	    cssSourceMap: false,
	  }
  }

По его комментариям мы можем понять, что он настроен в devстатический путь,конфигурация локального сервера,Eslint,Source Mapsи другие параметры. Если нам нужно изменить статический файл ресурсов, порт сервера и другие параметры во время разработки, мы можем внести изменения в этот файл.

Ниже также есть объект сборки, который представляет собой некоторые конфигурации, упакованные при запуске локального сервера vue.Код выглядит следующим образом:

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

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

Поговорив о файле index.js в разделе config, вернитесь к файлу utils.js, мы можем посмотреть на несколько методов, чтобы проанализировать, что они делают.

1. Метод assetsPath

   Принимает параметр _path

   Возвращает путь, объединенный статическим местоположением каталога.

   Он оценивает текущую рабочую среду в соответствии с переменной proccess.env.NODE_ENV nodejs. Возвращает разные статические местоположения каталогов в разных средах для объединения заданного параметра _path.

2. метод cssLoaders

   Принимает параметр options, а параметры также имеют атрибуты: sourceMap, usePostCSS.

   В то же время упомянутый ранее плагин extract-text-webpack-plugin здесь используется для того, чтобы выделить CSS-код в js, а затем упаковать их отдельно. В то же время он возвращает объект, который содержит методы генерации загрузчика прекомпилятора CSS (less, sass, stylus) и т. д. Если в вашей документации явно требуется только один язык css, это может быть немного яснее, при этом уменьшив размер вашего пакета npm (в конце концов, это неприятно).

3. Метод styleLoaders

   Объект принятых опций такой же, как и в приведенном выше методе. Этот метод просто генерирует разные загрузчики в соответствии с конфигурацией метода в cssLoaders. Затем верните его.

4. метод createNotifierCallback

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

Всего в utils определено четыре метода функций.

Оглядываясь назад на файл webpack.base.conf.js, мы можем сразу пропустить файл index.js в каталоге config, который был проанализирован ранее. Давайте посмотрим непосредственно на содержимое vue-loader.conf.js.

vue-loader.conf.js

Код в этом файле очень маленький, мы можем вставить код напрямую, а затем проанализировать функцию. код показывает, как показано ниже:

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

Среди них, в основном, на основе переменной NODE_ENV, а затем анализировать, является ли это производственной средой, а затем загружать в зависимости от разных сред, разных сред, чтобы определить, включена ли функция sourceMap. Удобно добавить функцию sourceMap в cssLoaders. Затем определите, установлено ли свойство cacheBusting, которое относится к очистке кеша, особенно при выполнении отладки sourceMap, очень полезно установить для него значение false. Последнее — это содержимое запроса на преобразование, и настраиваются свойства видео, источника, изображения, изображения и т. д.

В частности, вам все еще нужно понимать vue-loader, загрузчик webpack.

После стольких анализов я наконец вернулся к файлу webpack.base.conf.js.

webpack.base.conf.js

На самом деле есть два метода, один из которых — слияние пути path, а другой — загрузка правил Eslint.

Давайте посмотрим непосредственно на последнюю функцию, метод createLintingRule:

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

Следующий объект — это основная информация о конфигурации webpack. Мы можем анализировать поле за полем:

• context => контекст работающей среды, который является фактическим каталогом
• запись => файл записи: файл main.js в src
• вывод => вывод содержимого, внутренняя конфигурация будет меняться в зависимости от различных операционных сред.
• resolve => Поле extensions в нем указывает суффикс обнаруженного файла, а alias используется для указания псевдонима. В пути к эталонному файлу, если есть символ псевдонима, он будет заменен указанным путем.
• модуль => настроить некоторые загрузчики, загружаемые eslint, vue, js, ресурсы изображений, значки шрифтов, файлы и т. д. За подробностями вы можете перейти на официальный сайт webpack.
• node => Здесь есть комментарии, в основном для предотвращения некоторых стандартных действий веб-пакета по внедрению, потому что в vue эти функции уже доступны.

Прочитав их, вы, возможно, получите некоторое представление о содержании webapck.base.conf.js. На самом деле, чтобы понять это, вам также нужно понять webpack, очень полезный инструмент для создания пакетов.

После этого смотрим туда-сюда файл webpack.dev.conf.js

webpack.dev.conf.js

В этом файле упоминается пакет npm webapck-merge, который может объединять два объекта конфигурации. код показывает, как показано ниже:

const merge = require('webpack-merge');
const devWebpackConfig = merge(baseWebpackConfig, {
	...
}

Это объединяет элементы конфигурации webpack в base. После этого мы можем взглянуть на недавно добавленные элементы конфигурации в среде разработки.Что они делают?

1. Для начала добавим в правила модуля функцию cssSourceMap

2. Тогда есть devtools, благодаря переводу комментариев на английский язык вы можете узнать, что Cheap-module-eval-source-map ускоряет разработку.

3. После этого идут некоторые элементы конфигурации devSever. Клиент блокирования пакетов сообщает об уровне ошибки, порте, хосте и т. д.

4. Есть также новые плагины, мы можем взглянуть на фактические новые плагины (подробности см. В документации по веб-пакету):

   • определить процесс.env
   • HotModuleReplacementPlugin: Плагин горячей замены модуля
   • NameModulesPlugin: Отображение модуля загрузки подключаемого модуля относительного пути
   • NoEmitOnErrorsPlugin: Используйте NoEmitOnErrorsPlugin, чтобы пропустить этап вывода при возникновении ошибок компиляции. Это гарантирует, что выходной ресурс не будет содержать ошибок
   • HtmlWebpackPlugin: создает указанный шаблон с помощью подключаемого модуля.

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

webpack.prod.conf.js

Это файл, который упакован в производственную среду и будет использоваться. Мы видим, что в нем меньше плагинов и больше плагинов, чем в предыдущем файле webapck.dev.conf.js. Мы также можем узнать, что он делает, через некоторые из его новых дополнений, как и раньше! (Дополнения здесь относятся к тому, чего нет в webpack.dev.conf.js)

1. Конфигурация вывода была добавлена, мы видим, что он добавил некоторые свойства в вывод, упаковал js в разные куски, а затем назвал его с суффиксом хеш.

2. Добавлено несколько плагинов:

   • UglifJsPlugin: используется для исправления js-кода.
   • ExtractTextplugin: здесь добавлены некоторые новые свойства, а также добавлены суффиксы блоков и хешей в упакованный файл css.
   • OPTIONIZECSSSPLUGIN: Это для оптимизации файлов CSS, в основном для Compress CSS-кода
   • HashedModuleIdsPlugin: убедитесь, что значение идентификатора модуля стабильно.
   • Оптимизировать: Вот ряд мер по оптимизации для веб-пакета, вы можете проверить официальные документы один за другим.
   • CopyWebPlugins: Каталог файлов пользовательских ресурсов

3. Если сжатие gzip не выполняется, вызовите подключаемый модуль CompressionWebpackPlugin для сжатия

Таким образом, содержимое нашего файла конфигурации веб-пакета в основном готово. Может быть, это будет немного запутанно, или посмотрите официальные документы.

Наконец, необходимо проанализировать файл build.js.

build.js

Этот файл используется при упаковке.

Сначала запрашивается функция в check-version.js в начале файла, а затем определяется версия узла и npm. Относительно младших версий node и npm в процессе упаковки генерируется предупреждение. После этого установите параметры среды, установите ее в рабочую среду, а затем выполните ряд процессов упаковки.

Суммировать

Эта статья в основном суммирует общие функции некоторых параметров конфигурации и файлов в файлах, сгенерированных vue-cli. Что-то не так, надеюсь, вы меня поправите. В то же время я надеюсь, что мы сможем добиться прогресса и вместе поддерживать друг друга.

Если у вас есть какие-либо вопросы по поводу того, что я написал, вы можете прокомментировать.Если есть ошибка в том, что я написал, пожалуйста, поправьте меня. Если вам нравится мой блог, подписывайтесь на меня в Star~блог на гитхабе