«Фронтенд-инжиниринг» — как создать библиотеку компонентов пользовательского интерфейса.

предисловие

Я присоединился к новой компании несколько лет назад, и компания запросила создание библиотеки компонентов пользовательского интерфейса, В этом столбце подробно описаны идеи и шаги по созданию, и, наконец, есть адрес проекта на github.

1. Установите Vue CLI3

Сначала вам нужно удалить Vue CLI2 с помощью командыnpm uninstall vue-cli -gудалить;
введите командуcnpm install -g @vue/cliУстановите Vue CLI3;
После завершения установки введите командуvue --versionи проверьте, выше ли номер версии Vue CLI 3.0. Если да, установка прошла успешно.

Во-вторых, используйте Vue CLI3 для создания проекта проекта Vue.

1. Введите cmd в адресе папки, чтобы открыть инструмент командной строки.

2, введите инструмент командной строкиvue create foxit-ui,foxit-uiэто имя проекта.
3. Нажимайте клавиши «вверх» и «вниз», чтобы выбрать пункт «Выбрать функции вручную» (выбрать функции вручную), по умолчанию (babel, eslint) (установка по умолчанию).

4. Нажимайте клавиши вверх и вниз, а также клавишу пробела, чтобы выбрать функцию, которую необходимо установить.

5. Выберите версию Vue для использования, выберите версию Vue 2.0.

6. Выберите маршрутизатор в режиме истории, введите Y и нажмите Enter, чтобы перейти к следующему шагу.

7. Выберите язык прекомпиляции CSS, здесь выберите Меньше.

8. Выберите В выделенных файлах конфигурации и настройте Babel, ESLint и т. д. независимо вpackage.jsonвне файла.

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

10. Начните загрузку проекта проекта Vue. Если загрузка идет очень медленно, это проблема с сетью, вы можете подключить компьютер к мобильной сети.

11. Если он выглядит так, как показано на рисунке ниже, это означает, что загрузка прошла успешно.

12. Выполнить отдельноcd foxit-uiа такжеnpm run serveЗапустите проект, после успешного выполнения откройте его в браузереhttp://localhost:8080/, появится содержимое, показанное на следующем рисунке.

3. Преобразуйте проект проекта Vue в проект библиотеки компонентов Vue.

1. Реновация демо-зоны разработки компонентов

Демонстрация компонента будет в проекте проекта Vue.srcОн разрабатывается под папку, поэтому измените имя файла на примеры, чтобы сравнить изображение.

потому чтоsrcв папкеmain.jsЭтот файл является исходным файлом входа проекта Vue.srcПосле изменения имени папки необходимо перенастроить адрес файла записи.

Проект Vue, созданный с помощью Vue ClI3, должен создать проект в корневом каталоге проекта.vue.config.jsчтобы изменить конфигурацию веб-пакета.

module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js'
    }
  }
}

повторно выполнить командуnpm run serve, будет обнаружена ошибка, как показано на фиг. Это потому что@Этот псевдоним пути представляет собой имя папки src.Теперь, когда имя папки src больше не существует, он, естественно, сообщит об ошибке.

Независимо от этой ошибки здесь, сначала поставьте оригиналsrcОчистите файлы и код в папке. положить его вassetsпапка,componentsПапки удаляются.viewУдалите файлы в папке и создайте новуюdemo.vueфайл, содержание следующее

<template>
  <div>
    <h1>foxit-ui</h1>
  </div>
</template>

Измените маршрут, вrouter/index.jsв файле.

import Vue from 'vue'
import VueRouter from 'vue-router'
import demo from '../views/demo.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'demo',
    component: demo
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

повторно выполнить командуnpm run serve, открыть в браузереhttp://localhost:8080/, появится содержимое, показанное на следующем рисунке.

2. Построение области разработки компонента

Собрать библиотеку компонентов, содержащую множество компонентов.Чтобы уменьшить объем проекта после компиляции и упаковки, необходимо реализовать представленные здесь функции по требованию. Пользовательский интерфейс ссылочного элемента заключается в использовании подключаемого модуля babel-plugin-component для реализации представления по запросу.

Предпосылкой использования плагина babel-plugin-component для импорта библиотеки компонентов по запросу является то, что библиотека компонентов скомпилирована и упакована с несколькими входами.

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

Поэтому используйте переменные средыNODE_ENVЧтобы различать, является ли это средой разработки или производственной средой, когдаNODE_ENVдляdevelopmentявляется средой разработки.

переменная средыNODE_ENVв состоянии пройтиprocess.env.NODE_ENVчтобы получить. следовательноvue.config.jsСоздайте две константы в файле, constDEV_CONFIGПредставляет собой конфигурацию среды разработки, константуBUILD_CONFIGПредставляет конфигурацию производственной среды.

const DEV_CONFIG = {
  pages: {
    index: {
      entry: 'examples/main.js'
    }
  }
};
const BUILD_CONFIG = {

};
module.exports = process.env.NODE_ENV === 'development' ? DEV_CONFIG : BUILD_CONFIG;

Создайте один в корневом каталогеpackagesПапки используются для областей разработки компонентов.

3. Реализовать библиотеку компонентов компиляции и упаковки с несколькими входами.

Адрес входного файла проекта находится в общем вебпакеentryопции для настройки.entryЗначение опции — объект, так называемая многовходовая конфигурация находится вentryДобавьте в параметр несколько пар "ключ-значение". Имя ключа можно использовать для настройки расположения упакованного файла. Значением ключа является системный абсолютный путь к файлу записи. Например, вpackagesВ папке разрабатываются два компонента, testA и testB.Входным файлом каждого компонента является файл в папке, в которой находится компонент.index.jsфайл, а основная записьpackages/index.jsдокумент.

module.exports = {
  entry: { 
      index: 'E:\\project\\03UI\\foxit-ui\\packages\\index.js',
      testA: 'E:\\project\\03UI\\foxit-ui\\packages\\testA\\index.js',
      testB: 'E:\\project\\03UI\\foxit-ui\\packages\\testB\\index.js' 
  }
}

В Vue CLI3 сначала используйте chainWebpackconfig.entryPoints.delete('app')ПучокentryУдалите пару ключ-значение в приложении, а затем используйте configureWebpack, чтобы добавитьentry. существуетvue.config.jsДобавьте следующую конфигурацию в файл.

const DEV_CONFIG = {
};
const BUILD_CONFIG = {
  chainWebpack: config => {
    config.entryPoints.delete('app');
  },
  configureWebpack: {
    entry: {
      index: 'E:\\project\\03UI\\foxit-ui\\packages\\index.js',
      testA: 'E:\\project\\03UI\\foxit-ui\\packages\\testA\\index.js',
      testB: 'E:\\project\\03UI\\foxit-ui\\packages\\testB\\index.js'
    },
    output: {
      filename: '[name]/index.js',
      libraryTarget: 'commonjs2',
    }
  },
};
module.exports = process.env.NODE_ENV === 'development' ? DEV_CONFIG : BUILD_CONFIG;

Помните, что в производственной средеpackagesСодержимое папки добавляется в компиляцию.

Выполнение заказаnpm run build Результат упаковки выглядит следующим образом

Как видно из приведенного выше рисунка,output.filenameзначение[name]/index.jsсередина[name]то естьentryимя ключа в опциях.

Что касаетсяlibraryTarget: 'commonjs2'Это означает, что упакованное значение каждого входного файла будет присвоеноmodule.exports, что также означает, что упакованные файлы будут использоваться в среде CommonJS.

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

4. Реализовать настройку автоматических файлов с несколькими входами

Благодаря приведенной выше конфигурации мы можем знать, что пока API Nodejs используется для полученияpackagesАбсолютный путь к входному файлу каждого компонента в папке склеивается в нужный формат и присваиваетсяentryвозможность автоматизировать настройку файлов с несколькими входами.

В Nodejs есть модуль fs для получения информации о файле и модуль пути для обработки путей. Идея реализации заключается в использовании API в модуле fs для полученияpackagesКаждое имя папки в папке выглядит какentry, а затем используйте API в модуле пути, чтобы получитьpackagesв каждой папке под папкойindex.jsсистемный абсолютный путь какentryключевое значение.

Ниже приведены API, которые будут использоваться в модуле fs:

fs.readdirSync(path)Вы можете асинхронно получить объект массива всех имен файлов в каталоге и его параметрыpathэто абсолютный путь, где находится каталог.
fs.statSync(path)Объект массива статистики файла может быть возвращен асинхронно, и его параметрыpathэто абсолютный путь, где находится файл.

Вот API, которые будут использоваться в модуле пути:

path.resolve([...paths])Это эквивалентно выполнению операции каждого параметра cd слева направо в текущем каталоге и, наконец, возвращает путь к текущему каталогу. Например:path.resolve('/foo/bar','baz')эквивалентно:
```
cd /foo/bar //此时当前路径为 /foo/bar
cd baz //此时路径为 /foo/bar/baz
```
path.join([...paths])Объединяет все заданные сегменты пути вместе, используя системный разделитель в качестве разделителя, и нормализует результирующий путь.

Сначала опубликуйте код реализации и проанализируйте его шаг за шагом.

const fs = require('fs');
const path = require('path');
function resolve(dir) {
  return path.resolve(__dirname, dir);
}
const join = path.join;
function getEntries(path) {
  let files = fs.readdirSync(resolve(path));
  const entries = files.reduce((ret, item) => {
    const itemPath = join(path, item);
    const isDir = fs.statSync(itemPath).isDirectory();
    if (isDir) {
      ret[item] = resolve(join(itemPath, 'index.js'));
    } else {
      const [name] = item.split('.');
      ret[name] = resolve(itemPath);
    }
    return ret;
  }, {})
  return entries;
}

выполнить первымconst fs = require('fs'); const path = require('path');Представьте модуль Nodejs fs и модуль пути.

существуетresolveв функции__dirnameИспользование делегирования в Nodejs__dirnameСистемный абсолютный путь к файлу js, например, в случае__dirnameценностьE:\project\03UI\foxit-ui, то параметрdirЭто может быть имя файла или адрес файла, например:resolve('packages'), возвращаемое значение равноE:\project\03UI\foxit-ui\packages.

существуетgetEntriesФункция, когда параметрpathдляpackagesкогда, выполнитьfs.readdirSync(resolve(path))вернуть['index.js', 'testA', 'testB']назначить переменнойfiles, и снова в инженерииpackagesЕсть ли у вас четкое представление о структуре каталогов папок?fs.readdirSyncполезность.

getEntriesЦель функции - вернутьentryвыбранное значение. Его формат значения следующий:

entry: { 
    index: 'E:\\project\\03UI\\foxit-ui\\packages\\index.js',
    testA: 'E:\\project\\03UI\\foxit-ui\\packages\\testA\\index.js',
    testB: 'E:\\project\\03UI\\foxit-ui\\packages\\testB\\index.js' 
}

Здесь используйте массивreduceметод сращиванияentry.reduceПервый параметр получает функцию как функцию обратного вызова, которая обрабатывается слева направо.filesДля каждого значения в массиве обработайте результат с помощью аргументов функции обратного вызова.retвернуть,retНачальное значение черезreduceВторой параметр передается как{}.

воплощать в жизньconst itemPath = join(path, item)Сначала склеил обратноpackagesАдрес файла на следующем уровне каталога папок, например:packages\testA,packages\index.js.

ПредположениеitemPathЗначениеpackages\index.js, получен относительный адрес входного файла, выполнитьresolve('packages\index.js')После обработки можно получить абсолютный адрес своей системы.

ПредположениеitemPathЗначениеpackages\testA, также используйтеjoin('packages\testA', 'index.js')Объедините адрес, чтобы получитьpackages\testA\index.js, а затем выполнитьresolve('packages\testA\index.js')Процесс для получения системного абсолютного адреса файла входа компонента testA.

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

может быть выполненfs.statSync(itemPath)Возвращает информацию о ресурсеstatsобъект, и этот объект имеетisDirectoryметод, чтобы определить, является ли ресурс папкой или файлом. Возвращает, если файл является папкойtrueназначить переменнойisDir.

когдаisDirдляtrueкогда, выполнитьresolve(join(itemPath, 'index.js'))Получите системный абсолютный путь файла записи и назначьте егоret[item].

когдаisDirдляfalseкогда, выполнитьresolve(itemPath)Получив системный абсолютный путь к входному файлу, назначьте егоretИмя ключа нельзя использовать напрямуюitemВыполнитьconst [name] = item.split('.'), который использует деструктивное задание ES6, а затем назначает егоret[name].

Наконец положитьreduceвозвращаемое значение методаretназначатьentriesи выйти обратно.

например, выполнитьgetEntries('packages')Можно получить следующие объекты, которые можно использовать в качествеentryСтоимость опции.

{ 
    index: 'E:\\project\\03UI\\foxit-ui\\packages\\index.js',
    testA: 'E:\\project\\03UI\\foxit-ui\\packages\\testA\\index.js',
    testB: 'E:\\project\\03UI\\foxit-ui\\packages\\testB\\index.js' 
}

затем вvue.config.jsИзмените конфигурацию в файле:

const fs = require('fs');
const path = require('path');
function resolve(dir) {
  return path.resolve(__dirname, dir);
}
const join = path.join
function getEntries(path) {
  let files = fs.readdirSync(resolve(path));
  const entries = files.reduce((ret, item) => {
    const itemPath = join(path, item);
    const isDir = fs.statSync(itemPath).isDirectory();
    if (isDir) {
      ret[item] = resolve(join(itemPath, 'index.js'));
    } else {
      const [name] = item.split('.');
      ret[name] = resolve(itemPath);
    }
    return ret;
  }, {})
  return entries;
}
const DEV_CONFIG = {
};
const BUILD_CONFIG = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
      .add('/packages')
      .end()
    config.entryPoints.delete('app');
  },
  configureWebpack: {
    entry: {
      ...getEntries('packages')
    },
    output: {
      filename: '[name]/index.js',
      libraryTarget: 'commonjs2',
    }
  },
};
module.exports = process.env.NODE_ENV === 'development' ? DEV_CONFIG : BUILD_CONFIG;

Выполнение заказаnpm run build Результат упаковки выглядит следующим образом

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

5, настройте пакет компилятора библиотеки компонентов, уложил положение для генерации ресурсов

Здесь библиотека компонентов компилируется, упаковывается и помещается вlibпапка, вvue.config.jsДобавьте в файл следующую конфигурацию:

const BUILD_CONFIG = {
   outputDir: 'lib',
}
module.exports = process.env.NODE_ENV === 'development' ? DEV_CONFIG : BUILD_CONFIG;

6. Настройте место хранения компиляции стиля компонента и упаковки сгенерированных ресурсов.

Здесь файлы стилей, скомпилированные и упакованные библиотекой компонентов, помещаются вlib/styleпапка, вvue.config.jsДобавьте в файл следующую конфигурацию:

const BUILD_CONFIG = {
  css: {
    extract: {
      filename: 'style/[name].css'
    }
  },
}
module.exports = process.env.NODE_ENV === 'development' ? DEV_CONFIG : BUILD_CONFIG;

7. Закройте исходную карту

Закрытие исходной карты имеет два преимущества

Сокращение времени компиляции и упаковки.
Старайтесь не видеть исходный код в Sources с работающими инструментами разработчика F12.

существуетvue.config.jsДобавьте следующую конфигурацию в файл

const BUILD_CONFIG = {
  productionSourceMap: false,
}
module.exports = process.env.NODE_ENV === 'development' ? DEV_CONFIG : BUILD_CONFIG;

8. Удалите некоторые бесполезные функции, изначально скомпилированные и упакованные Vue CLI3.

Удалите splitChunks, потому что каждый компонент упакован независимо, и нет необходимости извлекать общедоступные js каждого компонента.
Удалить копию, не копировать содержимое общей папки в папку lib.
Удалите html, только компоненты упаковки, не генерируйте html-страницы.
Удалите предварительную загрузку и предварительную выборку, потому что html-страница не генерируется, поэтому эти два бесполезны.
Удалить hmr, удалить горячее обновление.

существуетvue.config.jsДобавьте следующую конфигурацию в файл

const BUILD_CONFIG = {
  chainWebpack: config => {
    config.optimization.delete('splitChunks');
    config.plugins.delete('copy');
    config.plugins.delete('html');
    config.plugins.delete('preload');
    config.plugins.delete('prefetch');
    config.plugins.delete('hmr');
  },
}

В-четвертых, как разработать VUE компонент

Вышеупомянутое просто настроило среду публикации для библиотеки компонентов Vue. Давайте создадим среду разработки для библиотеки компонентов Vue.

Чтобы сначала разработать компонент Vue, вспомните, как использовать компонент Vue, например, как используется element-ui.

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

В проекте Vue вообще вmain.jsДобавьте приведенный выше код, чтобы использовать element-ui вVue.use(ElementUI)является ключом.

Взгляните на пару официальной документации Vue.Vue.useОпределение

Vue.use(плагин), параметр: плагин {Object | Function}, использование: установить плагин Vue.js. Если подключаемый модуль является объектом, необходимо указать метод установки. Если плагин является функцией, он будет использоваться как метод установки. Когда вызывается метод установки, Vue передается в качестве параметра. Этот метод необходимо вызывать перед вызовом new Vue(). Когда метод установки вызывается одним и тем же плагином несколько раз, плагин будет установлен только один раз.

По сути, компонент Vue также является подключаемым модулем, и, как упоминалось выше, подключаемый модуль должен предоставлять метод установки. В использованииVue.useПри регистрации плагина вызывается метод install.

Давайте посмотрим на определение метода установки в официальной документации Vue.

Плагины Vue.js должны предоставлять метод установки. Первый параметр этого метода — конструктор Vue, а второй параметр — необязательный объект параметров.

Затем в методе установки используйтеVue.componentЗарегистрируйте разработанный компонент как глобальный компонент. так что черезVue.useиспользовать компонент.

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

существуетpackagesсоздать папкуtestAпапку, пишем в ней компонент testA и создаемindex.jsФайл используется как входной файл компонента testA, и в него добавляется следующий код:

import test from './src/index.vue';
test.install = function (Vue) {
  Vue.component(test.name, test);
};
export default test;

Vue.componentПервый параметр — это имя компонента, а второй параметр — это объект опций для компонента. Из приведенного выше кода вы можете увидеть объект параметров компонента.testОт./src/index.vueимпортный.

посмотриtestA/src/index.vueСодержимое файла:

<template>
  <div>测试按需引入A</div>
</template>
<script>
export default {
  name: "testA",
  data() {
    return {};
  },
};
</script>

Хорошо ли вы знакомы с приведенным выше контентом, то есть с кодом, написанным при обычной разработке страниц Vue. Что касается объекта параметров компонентов, упомянутых вышеtestто естьexport default { }содержание в .

воплощать в жизньVue.component(test.name, test)вtest.nameДля testA регистрируется глобальный компонент с именем testA.

Поскольку в библиотеке компонентов много компонентов, также требуется общий основной файл записи, вpackagesсоздать папкуindex.jsфайл, добавьте в него следующий код:

import testA from './testA'
export default {
  install(Vue) {
    Vue.use(testA);
  },
}

На данный момент разработан Vue-компонент testA. Итак, как его отладить? Давайте создадим среду отладки компонентов, которую также можно назвать средой разработки компонентов.

ранее упоминалось, что оригиналsrcИзмените имя папки наexamplesОбласть отладки как компонент. тогда ты можешьexamplesв папкеmain.jsРазработанные компоненты импортируются в файл. Код реализации выглядит следующим образом:

import test from '@/index'
Vue.use(test);

в@даpackagesПсевдоним для пути к папке, который находится вvue.config.jsнастраивается в файле.

const DEV_CONFIG = {
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        '@': resolve('packages'),
      }
    }
  }
}
module.exports = process.env.NODE_ENV === 'development' ? DEV_CONFIG : BUILD_CONFIG;

существуетdemo.vueИспользуйте компонент testA, как показано ниже.

<template>
    <div style="text-align:center">
        <img alt="Vue logo" src="../assets/logo.png">
        <testA></testA>
    </div>
</template>

<script>
export default {
    name: "demo",
    data() {
        return {
        }
    },
};
</script>

Выполнение заказаnpm run serve, открыть в браузереhttp://localhost:8080/, появится содержимое, показанное на следующем рисунке.

Среда публикации и разработки такой библиотеки компонентов завершена. Ниже описано, как опубликовать библиотеку компонентов в npm.