Просмотрите дизайн внешней библиотеки пользовательского интерфейса в процессе создания исходного кода Element UI.

внешний интерфейс Element
Просмотрите дизайн внешней библиотеки пользовательского интерфейса в процессе создания исходного кода Element UI.

введение

В связи с потребностями бизнеса команда должна разработать собственный набор в ближайшем будущем.UIБиблиотека компонентов, фреймворк по-прежнемуVue. В отрасли уже есть более зрелыеUIбиблиотека, напримерElementUI,AntDesign,VantЖдать.

комбинированная рамаVue, мы выбираемElementUIна основе трансформации. но造轮子Это непростая задача, сначала вам нужно понять весь процесс сборки, дизайн каталога и т. д.

В этой статье анализируетсяElementUIПолный процесс построения и, наконец, дайте некоторую работу, которую необходимо выполнить для создания полной библиотеки компонентов.Я надеюсь, что для тех, кто хочет понятьElementUIИсходный код или сборкаUIЕсли вам нужна библиотека компонентов, вы можете помочь!

Давайте сначала посмотримElementUIСтруктура каталогов исходного кода.

Анализ структуры каталогов

  • гитхаб: сохраненоElement UIРуководство по взносам,issueа такжеPRшаблон

  • build: хранит файлы конфигурации, связанные с упаковкой

  • примеры: демо-примеры, связанные с компонентами
  • пакеты: исходный код компонента
  • src: хранит файлы ввода и некоторые вспомогательные функции инструмента.
  • test: файлы, связанные с модульным тестом, которые также необходимы для отличного проекта с открытым исходным кодом.
  • типы: файл объявления типа

После разговора о каталоге файлов осталось еще несколько файлов (общие.babelrc,.eslintcЯ не буду здесь расширять описание), что не характерно для бизнес-кода:

  • .travis.yml: файл конфигурации для непрерывной интеграции (CI)
  • Журнал изменений: список изменений здесьElement UIПредусмотрено четыре разных языка, что тоже очень интимно
  • компоненты.json: идентифицирует компоненты пути к файлу, удобныйwebpackПолучите путь к файлу компонента при упаковке.
  • Часто задаваемые вопросы.ElementUIОтветы разработчиков на часто задаваемые вопросы.
  • ЛИЦЕНЗИЯ: Лицензия с открытым исходным кодом,Element UIиспользуетMITпротокол
  • Makefile:Makefileявляется подходящимC/C++инструменты, имеющиеmakeкаталог среды, если естьMakefileдокумент. затем введитеmakeкоманда будет выполненаMakefileЦелевая команда в файле.

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

package.json

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

Здесь я выделил несколько ключевых полей, чтобы последовательно проанализировать и объяснить их значение.

main

файл входа в проект

❝

import Element from 'element-ui'когда вступлениеmainфайлы в

❞

lib/element-ui.common.jsдаcommonjsспецификация, при этомlib/index.jsдаumdСпецификация, это я подробно объясню в модуле упаковки позже.

files

уточнитьnpm publishФайлы/каталоги, которые необходимо включить при отправке пакета.

typings

TypeScriptвходной файл.

home

Онлайн-адрес проекта

unpkg

Когда вы публикуете пакет вnpm, он также должен иметь возможностьunpkgполучено выше. То есть ваш код может быть либо вNodeJsокружающая среда также может быть浏览器环境воплощать в жизнь. Для этого нужно использоватьumdформатная упаковка,lib/index.jsдаumdспецификация, поwebpack.conf.jsгенерировать.

style

Файл записи декларативного стиля, вотlib/theme-chalk/index.css, о чем будет подробно рассказано позже.

scripts

Разработка, тестирование, производственная сборка, упаковка, развертывание, тестовые примеры и другие связанные сценарии.scriptsсчитатьpackage.jsonСамая важная часть, я объясню важные инструкции один за другим.

bootstrap 

"bootstrap": "yarn || npm i"

Зависимости установки, официальная рекомендация предпочтительнееyarn(TUCAO: я не понял этого сначала, думаяbootstrapЭто не та ui библиотека, которой я пользовался раньше 🤔, потом посмотрел, оказалосьbootstrapпереводится как引导程序Смысл , так что вы, наверное, можете понять его, глядя на него 🤣)

build:file

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

"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js"

Эта команда длинная, давайте разберем ее и посмотрим:

build/bin/iconInit.js

Разобратьicon.scss, поставить всеiconимя помещено вicon.jsonвнутри последнего висящего наVueна прототипе$iconначальство.

Наконец, пройдяicon.json, получил вот такой эффект официального сайта:

build/bin/build-entry.js

согласно сcomponents.jsonфайл, генерироватьsrc/index.jsфайл, ядроjson-templater/stringИспользование плагинов.

Давайте сначала посмотримsrc/index.jsФайл, который соответствует входному файлу проекта, имеет это предложение вверху:

/* Automatically generated by './build/bin/build-entry.js' */

то естьsrc/index.jsфайл сделанbuild/bin/build-entry.jsСкрипт создается автоматически. Давайте посмотрим на исходный код:

// 根据components.json生成src/index.js文件

// 引入所有组件的依赖关系
var Components = require('../../components.json');
var fs = require('fs');
// https://www.npmjs.com/package/json-templater 可以让string与变量结合 输出一些内容
var render = require('json-templater/string');
// https://github.com/SamVerschueren/uppercamelcase  转化为驼峰 foo-bar >> FooBar
var uppercamelcase = require('uppercamelcase');
var path = require('path');
// os.EOL属性是一个常量，返回当前操作系统的换行符（Windows系统是\r\n，其他系统是\n）
var endOfLine = require('os').EOL;

// 生成文件的名字和路径
var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
var INSTALL_COMPONENT_TEMPLATE = '  {{name}}';
// var MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-entry.js' */

// ...


// 获取所有组件的名字，存放在数组中
var ComponentNames = Object.keys(Components);

var includeComponentTemplate = [];
var installTemplate = [];
var listTemplate = [];

ComponentNames.forEach(name => {
  var componentName = uppercamelcase(name);

  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
    name: componentName,
    package: name
  }));

  if (['Loading', 'MessageBox', 'Notification', 'Message', 'InfiniteScroll'].indexOf(componentName) === -1) {
    installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, {
      name: componentName,
      component: name
    }));
  }

  if (componentName !== 'Loading') listTemplate.push(`  ${componentName}`);
});

var template = render(MAIN_TEMPLATE, {
  include: includeComponentTemplate.join(endOfLine),
  install: installTemplate.join(',' + endOfLine),
  version: process.env.VERSION || require('../../package.json').version,
  list: listTemplate.join(',' + endOfLine)
});

// 结果输出到src/index.js中
fs.writeFileSync(OUTPUT_PATH, template);
console.log('[build entry] DONE:', OUTPUT_PATH);

На самом деле, согласно вышеизложенному, согласноcomponents.json, сгенерироватьsrc/index.jsдокумент.

build/bin/i18n.js

согласно сexamples/i18n/page.jsonи шаблоны для создания разных языковdemo, то есть на официальном демо-сайте показана обработка интернационализации.

ElementUIИнтернационализация основана на официальном шаблоне сайта.examples/pages/templateи создавать разные файлы в соответствии с разными языками:здесь все.tplфайлы, каждый файл соответствует шаблону, и каждыйtplфайлы соответствуютSFCнормативныйVueдокумент.

Давайте откроем файл наугад:

export default {
    data() {
      return {
        lang: this.$route.meta.lang,
        navsData: [
          {
            path: '/design',
            name: '<%= 1 >'
          },
          {
            path: '/nav',
            name: '<%= 2 >'
          }
        ]
      };
    }
};

Внутри есть цифры, обозначающие места, которые нуждаются в интернационализации.

Все соответствия полей, связанные с интернационализацией на домашней странице, хранятся вexamples/i18n/page.jsonсередина:

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

После круга возвращаемся к теме:build/bin/i18n.jsЧто ты сделал для нас?

Мы думаем над вопросом: как отображение домашней страницы генерирует разныеvueА файлы?

Этоbuild/bin/i18n.jsПомогите нам сделать что-нибудь.

Взгляните на соответствующий исходный код:

'use strict';

var fs = require('fs');
var path = require('path');
var langConfig = require('../../examples/i18n/page.json');

langConfig.forEach(lang => {
  try {
    fs.statSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
  } catch (e) {
    fs.mkdirSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
  }

  Object.keys(lang.pages).forEach(page => {
    var templatePath = path.resolve(__dirname, `../../examples/pages/template/${ page }.tpl`);
    var outputPath = path.resolve(__dirname, `../../examples/pages/${ lang.lang }/${ page }.vue`);
    var content = fs.readFileSync(templatePath, 'utf8');
    var pairs = lang.pages[page];

    Object.keys(pairs).forEach(key => {
      content = content.replace(new RegExp(`<%=\\s*${ key }\\s*>`, 'g'), pairs[key]);
    });

    fs.writeFileSync(outputPath, content);
  });
});

Процесс обработки также очень прост:examples/i18n/page.json, по разным структурам данныхtplБит флага файла сопоставляется с обычным шаблоном и заменяется полем, которое было предустановлено само по себе.

Таким образом, интернационализация домашней страницы официального сайта завершена.

build/bin/version.js

согласно сpackage.jsonсерединаversion, сгенерироватьexamples/versions.json, соответствующий полному списку версий

build:theme

Связанная в стиле обработка.

"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",

Тот же самый также связан с несколькими операциями, давайте посмотрим.

build/bin/gen-cssfile

Этот шаг основан наcomponents.json, сгенерироватьpackage/theme-chalk/index.scssфайл для импорта всех стилей компонентов вindex.scss.

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

gulp build --gulpfile packages/theme-chalk/gulpfile.js

мы все знаемElementUIЕсть два способа импорта при использовании:

  • глобальный импорт
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
  • Внедрить по требованию
import Vue from 'vue';
import { Pagination, Dropdown } from 'element-ui';

import App from './App.vue';

Vue.use(Pagination)
Vue.use(Dropdown)

new Vue({
  el: '#app',
  render: h => h(App)
});

В соответствии с двумя методами введения,ElementТакже есть два варианта упаковки.

В частности, следующим образом:packages/theme-chalkвсе подscssфайл компилируется вcss, когда вам нужно импортировать глобально, импортируйте егоindex.scssфайл; при импорте по требованию импортируйте соответствующий компонентscssфайл.

Один из этих моментов, над которым нам нужно подумать: как поставитьpackages/theme-chalkвсе подscssфайл компилируется вcss?

В обычной разработке мы часто передаем работу по упаковке, сжатию и т.п.webpackиметь дело с, но для вышеуказанной проблемы, если мы используемgulpУдобнее обрабатывать на основе рабочего процесса.

gulpСоответствующая обработкаpackages/theme-chalk/gulpfile.jsсередина:

'use strict';

const { series, src, dest } = require('gulp');
const sass = require('gulp-sass');  // 编译gulp工具
const autoprefixer = require('gulp-autoprefixer');  // 添加厂商前缀
const cssmin = require('gulp-cssmin');  // 压缩css

function compile() {
  return src('./src/*.scss')  // src下的所有scss文件
    .pipe(sass.sync())  // 把scss文件编译成css
    .pipe(autoprefixer({  // 基于目标浏览器版本，添加厂商前缀
      browsers: ['ie > 9', 'last 2 versions'],
      cascade: false
    }))
    .pipe(cssmin())  // 压缩css
    .pipe(dest('./lib')); // 输出到lib下
}

function copyfont() {
  return src('./src/fonts/**')  // 读取src/fonts下的所有文件
    .pipe(cssmin())
    .pipe(dest('./lib/fonts')); // 输出到lib/fonts下
}

exports.build = series(compile, copyfont);

После обработки соответствующий файл стиля в конечном итоге будет упакован

cp-cli packages/theme-chalk/lib lib/theme-chalk
❝

cp-cliкроссплатформенныйcopyинструменты иCopyWebpackPluginаналогичный

❞

Вот файл для копированияlib/theme-chalkВниз.

много раз упоминалось вышеcomponents.json, чтобы узнать ниже.

components.json

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

{
  "pagination": "./packages/pagination/index.js",
  "dialog": "./packages/dialog/index.js",
  "autocomplete": "./packages/autocomplete/index.js",
  // ...
  "avatar": "./packages/avatar/index.js",
  "drawer": "./packages/drawer/index.js",
  "popconfirm": "./packages/popconfirm/index.js"
}

packages

Хранит исходный код и файлы стилей компонентов библиотеки компонентов.

здесь сAlertКомпоненты описаны в качестве примера:

Папка оповещений

здесьmain.vueСоответствующим является исходный код компонента, иindex.jsЭто входной документ:

import Alert from './src/main';

/* istanbul ignore next */
Alert.install = function(Vue) {
  Vue.component(Alert.name, Alert);
};

export default Alert;

Импортируйте компонент, затем предоставьте компонентinstallметод, пустьVueв состоянии пройтиVue.use(Alert)использовать.

❝

оinstallможно смотретьофициальная документация

❞

packages/theme-chalk

Здесь хранятся все стили, относящиеся к компонентам, которые были объяснены выше.index.scss(для экспорта всех стилей компонентов при глобальном импорте) и соответствующие друг другу компонентыscssфайл (для экспорта соответствующих стилей компонентов при импорте по требованию)

src

После долгого разговора я, наконец, пришел в себяsrcпапка.

надpackagesпапки обрабатываются отдельно для каждого компонента, аsrcФункция состоит в том, чтобы сделать унифицированную обработку всех компонентов, включая пользовательские инструкции, общую запись проекта, интернационализацию компонентов, примеси компонентов, инкапсуляцию анимации и общедоступные методы.В основном мы смотрим на входной файл, которыйsrc/index.js:

/* Automatically generated by './build/bin/build-entry.js' */
// 导入了packages下的所有组件
import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
import Autocomplete from '../packages/autocomplete/index.js';
// ...

const components = [
  Pagination,
  Dialog,
  Autocomplete,
  // ...
];

// 提供了install方法，帮我们挂载了一些组件与变量
const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);
  // 把所有的组件注册到Vue上面
  components.forEach(component => {
    Vue.component(component.name, component);
  });

  Vue.use(InfiniteScroll);
  Vue.use(Loading.directive);

  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
// 导出版本号、install方法（插件）、以及一些功能比如国际化功能
export default {
  version: '2.13.2',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  Pagination,
  Dialog,
  Autocomplete,
  // ...
};

Файл начинается с:

/* Automatically generated by './build/bin/build-entry.js' */

На самом деле, вышеscriptsизbuild/bin/build-entry.jsМы уже упоминали:src/index.jsКbuild-entryСкрипт генерируется автоматически.

Этот файл в основном делает следующее:

  • импортированныйpackagesВсе компоненты под
  • незащищенныйinstallметод для регистрации всех компонентов вVueвыше и вVueНекоторые глобальные переменные и методы смонтированы на прототипе
  • в конце концовinstallметод, переменная, экспорт метода

examples

хранитсяElementUIПример компонента.На самом деле, по структуре каталогов нетрудно увидеть, что это полноценный и независимыйVueпроект. В основном используется для отображения официальных документов:Здесь мы в основном ориентируемся наdocsпапка: ElementОфициальный сайт поддерживает 4 языка,docsВсего есть 4 папки, и содержимое каждой папки в основном одинаково.

Мы можем видеть, что всеmdдокумент, и каждыйmdДокументы соответствуют страницам отображения компонентов официального сайта соответственно.

❝

На самом деле, основные основные документы библиотеки компонентов теперь используютmdзаписывать.

❞

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

Наладить процесс строительства

Инструкции по сборке (Makefile)

Обычно мы привыкли помещать скрипты, обычно используемые в проектах, вpackage.jsonсерединаscriptsсередина. ноElementUIтакже используетсяMakefileФайлы (из-за большого количества файлов здесь выбрано несколько для следующего описания):

.PHONY: dist test
default: help

build-theme:
npm run build:theme


install:
npm install


install-cn:
npm install --registry=http://registry.npm.taobao.org


dev:
npm run dev


play:
npm run dev:play


new:
node build/bin/new.js (filter-out@,$(MAKECMDGOALS))


dist: install
npm run dist


deploy:
@npm run deploy


pub:
npm run pub


test:
npm run test:watch


// Tip:
// make new <component-name> [中文]
// 1、将新建组件添加到components.json
// 2、添加到index.scss
// 3、添加到element-ui.d.ts
// 4、创建package
// 5、添加到nav.config.json

Первый раз вижу, так что пойдуGoogleвниз, онлайнMakefileОпределение примерно такое:

❝

Makefileявляется подходящимC/C++инструмент, появившийся ранее как инженерный инструмент вUNIXсистема, черезmakeКоманда для выполнения ряда операций компиляции и компоновки. в владенииmakeкаталог среды, если естьMakefileдокумент. затем введитеmakeкоманда будет выполненаMakefileЦелевая команда в файле.

❞

Здесь я используюmake installВ качестве примера процесс выполнения кратко описан ниже:

  • воплощать в жизньmakeкоманда, найденная в этом каталогеMakefileдокумент.
  • оказатьсяMakefileСоответствующие параметры командной строки в файлеinstallЦель. Цель здесьnpm install

построить входной файл

Давайте посмотримscriptsсерединаdevИнструкция:

"dev":
"npm run bootstrap &&
npm run build:file &&
cross-env NODE_ENV=development
webpack-dev-server --config build/webpack.demo.js &
node build/bin/template.js",

первыйnpm run bootstrapиспользуется для установки зависимостей.

npm run build:fileКак упоминалось ранее, он в основном используется для автоматического создания некоторых файлов. в основномnode build/bin/build-entry.js, генерироватьElementВходjs: Сначала прочитайте корневой каталогcomponents.json,этоjsonобслуживание файловElementВсе отношения сопоставления путей компонентов, ключ — это имя компонента, а значение — это входной файл исходного кода компонента; затем пройдите значение ключа и выполните все компонентыimport, выставленный наружуinstallметод, положить всеimportкомпоненты черезVue.component(name, component)способ зарегистрироваться как глобальный компонент и смонтировать некоторые компоненты всплывающего класса вVueв цепочке прототипов (этот был представлен вышеscriptsПодробно описаны соответствующие скрипты).

в сгенерированном файле вводаsrc/index.jsзатем будет работатьwebpack-dev-server.

webpack-dev-server --config build/webpack.demo.js

Это также упоминалось ранее, для запускаElementБазовая конфигурация официального сайта.

Новый компонент

Мы упоминали выше,Elementтакже используется вmakefileНаписали несколько дополнительных скриптов для нас.

Сосредоточьтесь здесьmake new <component-name> [中文]эта команда.

При запуске этой команды она фактически запускаетсяnode build/bin/new.js.

build/bin/new.jsЭто относительно просто, и замечания очень ясны. Это помогает нам сделать следующие вещи:

1. Добавьте новый компонент вcomponents.json

2. Вpackages/theme-chalk/srcЗатем создайте новый компонент, соответствующийscssфайл и добавить вpackages/theme-chalk/src/index.scssсередина

3. Добавить вelement-ui.d.ts, то есть соответствующий файл объявления типа

4. Создатьpackage(Выше мы упоминали, что исходный код, относящийся к компоненту, находится вpackageкаталог)

5. Добавить вnav.config.json(то есть официальный сайт组件меню слева)

Анализ процесса упаковки

ElementUIСценарий, который нужно упаковать и выполнить:

"dist":
  "npm run clean &&
   npm run build:file &&
   npm run lint &&
   webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js &&
   npm run build:utils &&
   npm run build:umd &&
   npm run build:theme",

Давайте проанализируем их один за другим:

npm run clean (чистые файлы) 

"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",

Makefiles упаковываются перед удалением.

npm run build:file (создать файл записи)

согласно сcomponents.jsonСоздать входной файлsrc/index.js,так же какi18nСвязанные документы. Это было проанализировано выше и не будет объясняться здесь.

npm run lint (проверка кода) 

"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",

проектeslintТестирование, которое сейчас является обязательным для проекта.

Связанные с упаковкой файлов 

webpack --config build/webpack.conf.js &&
webpack --config build/webpack.common.js &&
webpack --config build/webpack.component.js
build/webpack.conf.js

генерироватьumdформатированныйjsфайл (index.js)

build/webpack.common.js

генерироватьcommonjsформатированныйjsфайл (элемент-ui.common.js),requireЭтот файл загружается по умолчанию.

build/webpack.component.js

кcomponents.jsonДля входа каждый компонент упакован для создания файла для загрузки по требованию.

npm run build:utils (метод инструмента перевода) 

"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",

Пучокsrcразве что в каталогеindex.jsДругие файлы, кроме входного файла, проходятbabelперевести, а затем перейти кlibпод папку.

npm run build:umd (языковый пакет) 

"build:umd": "node build/bin/build-locale.js",

генерироватьumdЯзыковой пакет для модуля.

npm run build:theme (создает файлы стилей) 

"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",

согласно сcomponents.json, сгенерироватьpackage/theme-chalk/index.scss. использоватьgulpинструменты для сборки, компиляцияscss, сжатие, выводcssприбытьlibсодержание.

Наконец, изображение используется для описания всего процесса упаковки выше:

Процесс публикации

Упаковка завершена, после чего следует выпуск кода.ElementВ основном используется средний выпускshellСкрипт реализован.

ElementРелиз состоит из трех частей:

1. выпуск git

2. выпуск нпм

3. Релиз официального сайта

Сценарий, соответствующий релизу:

"pub":
  "npm run bootstrap &&
   sh build/git-release.sh &&
   sh build/release.sh &&
   node build/bin/gen-indices.js &&
   sh build/deploy-faas.sh",

sh build/git-release.sh (обнаружение конфликтов кода)

бегатьgit-release.shпровестиgitОбнаружение конфликтов, здесь в основном обнаружениеdevконфликтуют ли ветви, потому чтоElementвdevветка для развития.

#!/usr/bin/env sh
# 切换至dev分支
git checkout dev
# 检测本地和暂存区是否还有未提交的文件
if test -n "$(git status --porcelain)"; then
  echo 'Unclean working tree. Commit or stash changes first.' >&2;
  exit 128;
fi
# 检测本地分支是否有误
if ! git fetch --quiet 2>/dev/null; then
  echo 'There was a problem fetching your branch. Run `git fetch` to see more...' >&2;
  exit 128;
fi
# 检测本地分支是否落后远程分支
if test "0" != "$(git rev-list --count --left-only @'{u}'...HEAD)"; then
  echo 'Remote history differ. Please pull changes.' >&2;
  exit 128;
fi
# 通过以上检查，表示代码无冲突
echo 'No conflicts.' >&2;

Опубликовать обновление официального сайта npm &&

devНет конфликта в обнаружении филиала, и он будет выполнен следующимrelease.shсценарий, объединитьdevответвление кmaster, обновить номер версии, отправить код в удаленный репозиторий и опубликовать вnpm(публикация npm).

Обновление официального сайта примерно таково: генерировать статические ресурсы дляexamples/element-uiкаталог, а затем поместитеgh-pagesветка, чтобы можно было пройтиgithub pagesспособ доступа.

сюдаElementUIАнализируется весь процесс строительства.

руководство по созданию библиотеки компонентов пользовательского интерфейса

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

Структура каталогов

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

|-- Element
    |-- .babelrc                           // babel相关配置
    |-- .eslintignore
    |-- .eslintrc                          // eslint相关配置
    |-- .gitattributes
    |-- .gitignore
    |-- .travis.yml                        // ci配置
    |-- CHANGELOG.en-US.md
    |-- CHANGELOG.es.md
    |-- CHANGELOG.fr-FR.md
    |-- CHANGELOG.zh-CN.md                 // 版本改动说明
    |-- FAQ.md                             // 常见问题QA
    |-- LICENSE                            // 版权协议相关
    |-- Makefile                           // 脚本集合（工程化编译）
    |-- README.md                          // 项目说明文档
    |-- components.json                    // 组件配置文件
    |-- element_logo.svg
    |-- package.json
    |-- yarn.lock
    |-- .github                            // 贡献者、issue、PR模版
    |   |-- CONTRIBUTING.en-US.md
    |   |-- CONTRIBUTING.es.md
    |   |-- CONTRIBUTING.fr-FR.md
    |   |-- CONTRIBUTING.zh-CN.md
    |   |-- ISSUE_TEMPLATE.md
    |   |-- PULL_REQUEST_TEMPLATE.md
    |   |-- stale.yml
    |-- build                              // 打包
    |-- examples                           // 示例代码
    |-- packages                           // 组件源码
    |-- src                                // 入口文件以及各种辅助文件
    |-- test                               // 单元测试文件
    |-- types                              // 类型声明

разработка компонента

относятся к большинствуUIПодход библиотеки компонентов, вы можете использоватьexamplesПриведенный ниже пример кода организован и предоставляет запись с использованиемwebpackнастроитьdev-server, последующая отладка и запуск компонентов здесьdev-serverпродолжайте ниже.

модульный тест

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

Пакет

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

В то же время, согласно различным методам введения, необходимо обеспечить全局引入(УМД) и按需加载Две формы упаковки.

Документация

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

выпускать

После разработки версии библиотеки компонентов пакет необходимо опубликовать в npm. Процесс выпуска:

  • Выполнение тестовых случаев
  • сборка пакета
  • Обновить номер версии
  • выпуск пакета npm
  • ярлык
  • Автоматическое развертывание

поддерживать

После релиза старую версию необходимо регулярно поддерживать, как правило, нужно обращать внимание на следующие моменты:

  • проблема (исправление ошибки)
  • запрос на вытягивание (код pr)
  • CHANGELOG.md (журнал изменений версий)
  • CONTRIBUTING.md (участники проекта и спецификации)

Ссылаться на

  • https://segmentfault.com/a/1190000016419049
  • https://zhuanlan.zhihu.com/p/94920464

В этой статье используетсяmdniceнабор текста

Категории