Vue CLI 3 в сочетании с Lerna для разработки фреймворка пользовательского интерфейса

Я впервые пишу статью о Наггетс, и она немного многословна, поэтому, пожалуйста, простите меня.

Конфигурация Webpack большинства современных фреймворков пользовательского интерфейса относительно сложна, напримерElement,Ant Design Vueа такжеMuse-UIи т.д. Библиотека компонентов Vue. Например, Элемент, чтобы реализовать две формы внедрения на уровне бизнеса (полный импорта такжеВнедрить по требованию), а также бросить некоторые общие бизнес-уровняutils,i18nИ т. д., конфигурация Webpack становится довольно сложной. Чтобы упростить проектирование фреймворка пользовательского интерфейса, вот простой дизайн фреймворка пользовательского интерфейса, Перед этим давайте кратко представимElementПроцесс сборки для сравнения нового дизайна фреймворка пользовательского интерфейса.

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

Адрес github разработанного практического проекта фреймворка пользовательского интерфейса:ziyi2/vue-cli3-lerna-ui,включеноpreset.json, подключаемый модуль Vue CLI, разработанный вами, и ряд компонентов пользовательского интерфейса, разработанных вами (немного отличающихся от примера сгенерированной среды пользовательского интерфейса). поднять вопрос, так что я также Это может быть улучшено. Если вы заинтересованы, я надеюсь, что вы можете звезду, спасибо здесь!

Element

сначала понятьElementпроцесс сборки см.Element2.7.0Версияpackage.jsonизнпм-скрипт:

// 其中的`node build/bin/build-entry.js` 生成Webpack构建入口
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
// 构建css样式
"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
// 构建commonjs规范的`utils`
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
// 构建umd模块的语言包
"build:umd": "node build/bin/build-locale.js",
// 清除构建文件夹`lib`
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
// 总体构建
"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",
// 执行eslint校验
"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet"

Сосредоточьтесь на скрипте сборки Element здесь, игнорируйте егоТестируйте, публикуйте, запускайте отладочные страницы разработки, создавайте демонстрационные страницыи т.п. сценарий.

npm run dist

а такжеElementСкрипты npm, связанные со сборкой, многочисленны, ноОбщий скрипт сборкидаdist:

"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- очистить папку сборкиlib
• npm run build:file- один из нихnode build/bin/build-entry.jsСоздать запись сборки Webpack
• npm run lint- Выполнить проверку eslint
• webpack --config build/webpack.conf.js- Построить мастер-файл umd
• webpack --config build/webpack.common.js- Собрать мастер-файл commonjs2
• webpack --config build/webpack.component.js- Сборка компонентов commonjs2 (обеспечение импорта по требованию)
• npm run build:utils- построить commonjsutils(для общих файлов commonjs2, компонентов commonjs2 и использования в бизнесе)
• npm run build:umd- Сборка языкового пакета umd
• npm run build:theme- Создание стилей css

если для дляumd,commonjs2,amdОпределение других модулей не очень понятно, обратитесь к документации Webpack.система определения модулей.

воплощать в жизньnpm run distПосле этого будет сгенерирован новый в текущем корневом каталогеlibпапка со следующим содержимым сборки:

lib
├── directives                  # commonjs指令(这里归为utils)
├── locale                      # commonjs国际化(commonjs语言包和API)
├── mixins        		# commonjs mixins(这里归为utils)
├── theme-chalk   		# css 样式文件
├── transitions			# commonjs transitions(这里归为utils)
├── umd           		# umd语言包   
├── utils
├── alert.js                    # commonjs组件
├── aside.js
├── ...
├── element-ui.common.js 	# commonjs2总文件 
├── ...
├── index.js                    # umd总文件
├── ...

отОфициальная документация Элементав сочетании с руководством пользователяlibКак можно заметить,ElementЭто дает нам возможность:

• 1. Введение в CDN (мастер-файл umd)
• 2. Полное введение пакета npm (выбросить общий файл commonjs2)
• 3. Внедрить по запросу (выбрасывает все компоненты пользовательского интерфейса commonjs2)
• 4. Поддержка интернационализации
• 5. ОбеспечьтеutilsМетод (официальные документы не объясняют, но по факту в бизнесе можно использовать)

Общие файлы umd, представленные CDN, как правило, собираются полностью, и проблем с зависимостями не будет, но файлы модуля commonjs2 необходимо собрать заново с помощью Webpack на бизнес-уровне. Например, необходимо поддерживать на уровне бизнесаглобализацияа такжепредоставить коммунальные услугифункция, тоглобализацияа такжепредоставить коммунальные услугикодbundleприбытьобщий файл commonjs2илиВсе компоненты пользовательского интерфейса commonjs2среда (каждый компонентbundleutilsметод или интернационализированный API явно неразумны), если вам нужно поддерживать его на уровне бизнесаВнедрить по требованиюфункцию, то не рекомендуется использоватьВсе компоненты пользовательского интерфейсаисходный кодbundleприбытьобщий файл commonjs2Таким образом можно реализовать послойные ссылки, и пока внешние функции выбрасываются, можно предотвратить двойную упаковку Webpack на бизнес-уровне, что приведет к проблеме введения одного и того же кода дважды или даже больше раз.

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

Затем проанализируйте функции различных сценариев сборки.

npm run build:file

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",

где находятся скрипты, связанные со сборкойnode build/bin/build-entry.js, в основном используется для создания входных исходных файлов для сборок Webpack.src/index.js:

// 注释说明该文件由build-entry.js脚本自动生成
/* Automatically generated by './build/bin/build-entry.js' */

import Pagination from '../packages/pagination/index.js';
// ... 这里省略大部分组件引入
import TimelineItem from '../packages/timeline-item/index.js';
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';

const components = [
  Pagination,
  // ... 这里省略大部分组件
  TimelineItem,
  CollapseTransition
];

const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

  components.forEach(component => {
    Vue.component(component.name, component);
  });

  Vue.use(Loading.directive);

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

  Vue.prototype.$loading = Loading.service;
  // ...
};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  version: '2.7.0',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  // ... 这里省略大部分组件
  TimelineItem
};

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

npm run lint

использовать перед постройкойlintСкрипт выполняет созданные исходные файлыeslintчек об оплате:

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

Elementправильноeslintстрого контролируется, когда-тоeslintсообщите об ошибке тогдаdistОбщий скрипт сборкиВыполнение останавливается, и вся сборка завершается сбоем. здесьeslintможно использовать проверкуeslint-loaderпроцесс (по желаниюeslintВы также можете построить, если проверка не пройдена.Вы можете просмотреть его.Errors and Warning).

webpack --config build/webpack.conf.js

webpack --config build/webpack.conf.jsСкрипт используется для создания мастер-файла umd, и выполнение скрипта завершится вlibГенерировать подindex.jsдокумент:

lib
├── index.js                    # umd 总文件

webpack.conf.jsКонфигурация выглядит следующим образом:

// build/webpack.conf.js

// ...忽略

module.exports = {
  mode: 'production',
  // 指定入口文件src/index.js，该入口文件由`build:file`脚本自动生成
  entry: {
    app: ['./src/index.js']
  },
  output: {
    // 在lib文件中生成
    path: path.resolve(process.cwd(), './lib'),
    // 生成lib/index.js
    filename: 'index.js',
    // 生成umd模块
    libraryTarget: 'umd',
    // src/index.js文件采用export default语法抛出，因此需要设置libraryExport
    // 否则引入的UI组件库需要使用.default才能引用到抛出的对象
    // if your entry has a default export of `MyDefaultModule`
    // var MyDefaultModule = _entry_return_.default;
    // 这里踩过坑，所以说明一下，不配置的话遇到的问题是引入的UI组件库没法解构
    libraryExport: 'default',
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
	// 'element-ui': path.resolve(__dirname, '../')
	// alias中的'element-ui'作为npm包抛出后指向了业务项目node_modules所在的npm包路径
    alias: config.alias
  },
  externals: {
    // 构建只排除vue
    // umd模块通过CDN形式引入，因此将所有的组件、utils、i18n等构建在内
    // umd模块没有按需引入功能
    vue: config.vue
  },
  // ...忽略
};

файл сборкиlib/index.jsОсновная функция — импорт проектов в виде CDN, и его нельзя подгружать по запросу, в результате получается очень большой объем, который может не подойти для простых приложений.

webpack --config build/webpack.common.js

webpack --config build/webpack.common.jsСкрипт используется для создания мастер-файла commonjs2, выполнение скрипта завершится вlibГенерировать подelement-ui.common.jsдокумент:

lib
├── element-ui.common.js 		#  commonjs2 总文件 

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

• 1. Полное введение (выбросить общий файл commonjs2)
• 2. Внедрить по запросу (выбрасывает все компоненты пользовательского интерфейса commonjs2)
• 3. Поддержка интернационализации (commonjs2)
• 4. ОбеспечитьutilsМетод (commonjs2, разумеется, официального объяснения нет)

webpack --config build/webpack.common.jsСценарий в основном используется для создания полной функции импорта, и в то же время его можно использовать на бизнес-уровне.Внедрение и поддержка интернационализации по запросуи другие функции, сборкаelement-ui.common.jsнужно бытьКомпоненты пользовательского интерфейса, поддержка интернационализации, методы использованияисключения исходного кода.

webpack.common.jsКонфигурация выглядит следующим образом:

// build/webpack.common.js

// ...忽略

module.exports = {
  mode: 'production',
  entry: {
    app: ['./src/index.js']
  },
  output: {
    path: path.resolve(process.cwd(), './lib'),
    publicPath: '/dist/',
    filename: 'element-ui.common.js',
    chunkFilename: '[id].js',
    libraryExport: 'default',
    library: 'ELEMENT',
    // 生成commonjs2模块
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
	// 'element-ui': path.resolve(__dirname, '../')
    alias: config.alias,
    modules: ['node_modules']
  },
  // 这里用于排除UI组件、支持国际化、utils方法的源代码，这些源代码需要额外的脚本进行构建
  externals: config.externals,
  optimization: {
    // commonjs2无须压缩处理
    minimize: false
  },
  // ...忽略
};

Необходимо обратить внимание наconfig.externalsсвойство, распечатайте значение переменной:

[{ 
  vue: 'vue',
  // 排除所有UI组件的源代码
  'element-ui/packages/option'：'element-ui/lib/option',
  // ...
  // 排除国际化的源代码
  'element-ui/src/locale': 'element-ui/lib/locale',
  // 排除utils方法的源代码
  'element-ui/src/utils/vue-popper': 'element-ui/lib/utils/vue-popper',
  'element-ui/src/mixins/emitter': 'element-ui/lib/mixins/emitter',
  'element-ui/src/transitions/collapse-transition': 'element-ui/lib/transitions/collapse-transition' 
  // ...
 },
 // var nodeExternals = require('webpack-node-externals');
 // nodeExternals()
 [Function] 
];

externalsАтрибуты могут исключать определенные зависимости из выходного пакета, такие как зависимости между компонентами в разработке,element-ui/packages/paginationвведен вelement-ui/packages/optionКомпоненты:

pagecages/pagination/src/pagination.js

// pagination组件中需要用到option组件
import ElOption from 'element-ui/packages/option';
// ...

После сборки Webpack его можно найти вelement-ui.common.jsнеelement-ui/packages/optionКомпонент запакован, но путь его импорта изменен толькоelement-ui/lib/option(в реализацииВнедрить по требованиюфункция будет использоватьсяwebpack --config build/webpack.component.jsскрипт создает файл).

// lib/element-ui.common.js
module.exports = require("element-ui/lib/option");

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

config.externalsПоследнее значение свойства равно[Function],Кwebpack-node-externalsСгенерировано. объясните здесьwebpack-node-externalsРоль:

Webpack allows you to define externals - modules that should not be bundled. When bundling with Webpack for the backend - you usually don't want to bundle its node_modules dependencies. This library creates an externals function that ignores node_modules when bundling in Webpack.

Например, вElmentЗависимости необходимы при разработке библиотеки компонентовdeepmerge, тогда Webpack не нужно связывать зависимость вelement-ui.common.js, вместо этого добавьте его вElementБиблиотеки компонентов (опубликованы как пакеты npm)dependencies, так что устанавливайте через npmElementтакже установит свои зависимостиdeepmerge, так чтоelement-ui.common.jsпройти черезrequire("deepmerge")Форма импорта этой зависимости не сообщит об ошибке.

перечислено здесьelement-ui.common.jsНекоторый код исключен:

// 排除utils源码(utils源码会通过`npm run build:utils`脚本构建)
module.exports = require("element-ui/lib/utils/dom");
// 排除vue
module.exports = require("vue");
// 排除国际化源码(国际化源码会通过`npm run build:utils`脚本构建)
module.exports = require("element-ui/lib/locale");
// 需要注意和Vue相关的JSX依赖（Vue CLI3系统构建的包也会有一个该功能的依赖）
module.exports = require("babel-helper-vue-jsx-merge-props");
// 排除一些Elment组件使用的其他依赖
module.exports = require("throttle-debounce/throttle"); 
// 排除UI组件源码(UI组件源码会通过`webpack --config build/webpack.component.js`脚本构建)
module.exports = require("element-ui/lib/option");

требует вниманияElementОпубликованный файл записи пакета npm:element-ui.common.js, доступ к которому можно получить через package.jsonmainПросмотр информации о поле.

webpack --config build/webpack.component.js

webpack --config build/webpack.component.jsСкрипт используется для сборки компонентов пользовательского интерфейса commonjs2 (предоставляя функцию импорта по запросу), и выполнение скрипта в конечном итоге будет выполнено вlibгенерировать всеElementПоддерживаемые компоненты пользовательского интерфейса (и эти файлы также будутelement-ui.common.jsОбщая ссылка на файл записи):

lib
├── alert.js                    # commonjs 组件
├── aside.js
├── button.js
├── ...

Проверитьbuild/webpack.component.jsКонфигурация:

// ...忽略
const Components = require('../components.json');

// Components是所有组件的构建入口列表
// {
//   "pagination": "./packages/pagination/index.js",
//   ...
//   "timeline-item": "./packages/timeline-item/index.js"
// }


const webpackConfig = {
  mode: 'production',
  // 多入口
  entry: Components,
  output: {
    path: path.resolve(process.cwd(), './lib'),
    publicPath: '/dist/',
    filename: '[name].js',
    chunkFilename: '[id].js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: config.alias,
    modules: ['node_modules']
  },
  // 排除其他UI组件、支持国际化、utils的源码，这些源码会额外构建
  externals: config.externals,
  },
  // ...忽略
};

Создавайте отдельные компоненты и создавайте общие входные файлыelement-ui.common.jsКонфигурация Webpack аналогична, нужно добавитьutils,localeи некоторые другие исключения зависимостей.

npm run build:utils

build:utilsСкрипт в основном используется для сборки commonjsutils(обеспечивает интернационализацию иutilsФункция):

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

Можно найти, что эта команда не использует WebPack для многофункциональной конструкции, но непосредственно уходит через Babel (Subpack Construction будет генерировать дополнительный код WebPack, а конфигурация является громоздкой, Babel iscapes Construction очень чистый), будетsrcВ дополнение к файлу ввода каталога WebPack Buildsrc/index.jsВсе остальные файлы экранированы. Выполнение скрипта завершится вlibгенерировать всеutilsдокумент:

lib
├── directives                  # commonjs 指令
├── locale                      # commonjs 国际化API和语言包
├── mixins        		# commonjs 混入
├── transitions			# commonjs 过度动画
├── utils                       # commonjs 工具方法

Сгенерированные методы инструмента будутlibвнизelement-ui.common.jsИ на каждый компонент можно ссылаться, и на эти инструменты и методы также можно ссылаться на бизнес-уровне. Проверить.babelrcИнформация о конфигурации файла:

{
  "presets": [
    [
      "env",
      {
        "loose": true,
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }
    ],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx"],
  "env": {
    // cross-env BABEL_ENV=utils
    "utils": {
      "presets": [
        [
          "env",
          {
            // 松散模式，更像人手写的ES5代码
            "loose": true,
            // es6转成commonjs
            "modules": "commonjs",
            "targets": {
              "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
          }
        ],
      ],
      "plugins": [
        ["module-resolver", {
          "root": ["element-ui"],
          "alias": {
           // 类似于Webpack的externals功能
           // 将源代码的引入路径更改成目标代码的引入路径
            "element-ui/src": "element-ui/lib"
          }
        }]
      ]
    },
    "test": {
      "plugins": ["istanbul"]
    }
  }
}

utilsПути, которые ссылаются друг на друга между исходным кодом файлов,element-ui/src, пути ссылок между собой после экранирования в объектный кодelement-ui/lib, поэтому должно быть что-то вроде WebpackexternalsФункция изменения пути ссылки целевого кода плагина при побеге Babelbabel-plugin-module-resolverЭта функция может быть реализована.

npm run build:theme

build:themeСкрипты в основном используются для создания стилей css для компонентов пользовательского интерфейса:

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

Основное внимание здесьgulp build --gulpfile packages/theme-chalk/gulpfile.jsскрипт, который используетGulpИнструменты сборки создают файлы стилей css, а Gup очень легко создает многофайловые стили. В конечном итоге текущая сборка будетpackages/theme-chalk/libСкопируйте содержимое каталога вlib/theme-chalkКаталог предназначен для внешнего коммерческого использования:

lib
├── theme-chalk   		# css 样式文件
│   ├── fonts                   # icons
│   ├── alert.css               # 按需引入的组件样式
│   ├── ...                     # 按需引入的组件样式
│   └── index.css               # 完整引入样式

Проверитьgulpfile.jsдокумент:

'use strict';

const { series, src, dest } = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');

function compile() {
  return src('./src/*.scss')
    // sass转化成css
    .pipe(sass.sync())
    // Parse CSS and add vendor prefixes to rules by Can I Use 
    // css浏览器兼容处理
    .pipe(autoprefixer({
      browsers: ['ie > 9', 'last 2 versions'],
      cascade: false
    }))
    // 压缩css
    .pipe(cssmin())
    .pipe(dest('./lib'));
}

function copyfont() {
  return src('./src/fonts/**')
    .pipe(cssmin())
    .pipe(dest('./lib/fonts'));
}

exports.build = series(compile, copyfont);

Vue CLI 3 & Lerna

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

Здесь на основеVue CLI 3изразработать/создать цель/библиотекуспособность иLernaИнструмент разрабатывает структуру пользовательского интерфейса, которая объединяет следующие функции:

• 1,Структурные особенности: каждый компонент пользовательского интерфейса представляет собой пакет npm,Несколько языков, инструментов и стилейВсе они представляют собой автономные пакеты npm, на которые могут гибко ссылаться бизнес-компоненты или компоненты пользовательского интерфейса, и которые естественным образом загружаются по запросу.
• 2,Особенности конфигурации: если требуется обработка сборки, каждый пакет npm можно собрать и настроить отдельно, что упрощает настройку. Объединение Vue CLI3библиотека компонентовВозможность создания простых компонентов пользовательского интерфейса может быть достигнута практически без настройки веб-пакета, за исключением, конечно, того, что требуется специальный загрузчик веб-пакета.
• 3.Особенности выпуска: итерация версии библиотеки компонентов может быть быстрее без необходимости общей сборки, и каждый компонент может быть быстро выпущен отдельно.PATCHилиMINORВерсия.

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

Дизайн этого фреймворка пользовательского интерфейса также имеет некоторые недостатки:

• 1. Нет полного введения функции (общая конструкция также может быть выполнена, но здесь не рекомендуется)
• 2. Модуль UMD не предусмотрен
• 3. Внедрение на бизнес-уровне громоздко (можно создать дополнительные инструменты внедрения для упрощения внедрения UI-компонентов в бизнесе)

Vue CLI 3

построить библиотеку

Чтобы упростить настройку веб-пакета фреймворка пользовательского интерфейса, Vue CLI 3 представлен здесь в качестве контейнера разработки, заимствуя Vue CLI 3.построить библиотекуФункция(сборка веб-компонентов-компонентовФункция должна быть более подходящей, здесь не выполняется проверка), и можно добиться почти нулевой конфигурации построения UI-компонента. пройти черезПросмотрите проект -webpack-configВозможность, вы можете просмотреть общую конфигурацию веб-пакета, которую предварительно устанавливает для нас Vue CLI 3 (которая может почти удовлетворить большинство сборок компонентов пользовательского интерфейса).

подключаемая система

Использование Vue CLI 3 здесьПлагины и пресетыБыло разработано несколько подключаемых модулей для облегчения быстрого создания исходной среды проектирования пользовательского интерфейса.preset.jsonКонфигурация выглядит следующим образом:

{
  "useConfigFiles": true,
  "router": true,
  "routerHistoryMode": true,
  "vuex": false,
  "cssPreprocessor": "less",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "lintOn": ["save", "commit"]
    },
    "@ziyi2/vue-cli-plugin-ui-base": {},
    "@ziyi2/vue-cli-plugin-ui-cz": {},
    "@ziyi2/vue-cli-plugin-ui-lint": {}
  }
}

Вот официальный дизайн@vue/cli-plugin-babelа также@vue/cli-plugin-eslintподключаемых модулей и разработал три дополнительных подключаемых модуля для поддержки запуска всей новой структуры пользовательского интерфейса:

• @ziyi2/vue-cli-plugin-ui-base: базовый подключаемый модуль пользовательского интерфейса, создание исходного каталога структуры Monorepo (добавление инструмента управления Lerna), создание базовой общей конфигурации веб-пакета (перенастройка конфигурации веб-пакета VUE CLI 3, VUE CLI3 обеспечиваетvue.config.jsфайл для перенастройки веб-пакета разработчиками) содержит несколько примеров основных компонентов пользовательского интерфейса (только для справки).
• @ziyi2/vue-cli-plugin-ui-cz: структура пользовательского интерфейсаczДобавлен плагин адаптераcz-customizable,commitlint,conventional-changelog, который используется для создания инструкций по отправке в Git спецификации Angular, определения соответствия инструкций по отправке спецификации и автоматического создания журнала обновления фреймворка пользовательского интерфейса и т. д.
• @ziyi2/vue-cli-plugin-ui-lint: фреймворк пользовательского интерфейсаlint-stagedДля плагинов перед отправкой кода будет выполнена проверка Eslint. Если проверка не пройдена, отправка кода острой курицы не допускается.

Три плагина были выпущены NPM Warehouse, если он уже Vue CLI 3 проекта, прямо черезvue add @ziyi2/ui-czДождитесь команды для установки и использования, адрес исходного кода плагинаziyi2/vue-cli3-lerna-ui/plugins, если вы хотите научиться разрабатывать плагины Vue CLI 3, вы можете обратиться кРуководство по разработке плагинов, но официальные документы могут быть недостаточно подробными, рекомендуется обращаться к официально разработанным плагинам или превосходным плагинам, разработанным другими.

Lerna

Lerna — это инструмент управления Monorepo, который интегрирует все проекты компонентов (пакетов npm) в репозиторий git.В то же время вы можете использовать функцию рабочей области пряжи для имитации среды выпущенных компонентов, чтобы упростить разработку и тестирование компонентов. Тестирование выпуска компонента нужно проводить несколько раз (также очень удобно использовать Lerna для разработки плагинов Vue CLI).

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

Компоненты пользовательского интерфейса могут устранять проблемы или добавлять новые функции по отдельности и могут быть быстро выпущены.PATCHа такжеMINORверсия, если есть несовместимое обновление компонентов пользовательского интерфейса в целом, вы можете использовать Lerna для этогоMAJORВыпуск версии, подробнее о спецификации выпуска версии можно посмотретьСемантическое управление версиями.

Практика пользовательского интерфейса

Используйте Vue CLI 3Удаленная предустановка, здесь я поделюсь с вами фреймворком пользовательского интерфейса, который я разработал для практического использования:

// 可能获取会有点慢，大家耐心等待
vue create --preset ziyi2/vue-cli3-lerna-ui my-project --packageManager yarn

Если сообщается об ошибкеunable to get local issuer certificate, вы можете установитьgit config --global http.sslVerify false.

Если удаленное получение файла preset.json не удалось, вы можете использовать локальный метод дляpreset.jsonСкопируйте конфигурацию и поместите ее в новуюpreset.jsonфайл, выполните следующую команду, чтобы сгенерировать структуру пользовательского интерфейса:

vue create --preset ziyi2/vue-cli3-lerna-ui my-project --packageManager yarn

Процесс генерации после выполнения выглядит следующим образом:

команда сценария

// 启动开发服务
"serve": "vue-cli-service serve",
// 生成静态资源
"build": "vue-cli-service build",
// Eslint校验
"lint": "vue-cli-service lint",
// 安装和链接Lerna repo的依赖
"bootstrap": "lerna bootstrap",
// 更新升级日志
"cz:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
// 构建
"lib": "lerna run lib"

Если вам нужно использовать GitHub Pages для публикации статических ресурсов, вы можете добавить команды"deploy": "npm run build && gh-pages -d dist", необходимо установитьgh-pageполагаться.

запускать

В каталог проекта, используйтеyarn serveкоманда для запуска режима разработки

Здесь приведены примеры дизайна пользовательского интерфейса, такие как интернационализация, селекторы, оповещения и кнопки.

Построить

воплощать в жизньlerna run libпосле (сборка может подойтиnpm run lintПроверка, если проверка не удалась, сборка не удалась), инструмент Lerna выполнит каждый пакет npm.libсценарий:

здесь соответственноutils,btn,themeПакет построен, гдеbtnИспользуется конфигурация библиотеки сборки Vue CLI 3 по умолчанию.

Структура монорепозитория

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

.
├── packages                 		# workspaces
│   ├── alert                		# 警告（不构建）
│   │     ├── alert.vue      		# 组件源码
│   │     ├── index.js       		# npm包入口文件
│   │     └── package.json   		# npm包描述文件
│   ├── btn                  		# 按钮
│   │     ├── lib      	     		# 目标文件
│   │     │    └── lib.common.js	# npm包入口文件
│   │     ├── btn.vue        		# 组件源码
│   │     ├── index.js       		# 构建入口文件
│   │     ├── package.json   		# npm包描述文件(需要vue cli的开发态依赖)
│   │     └── vue.config.js  		# 构建配置文件
│   ├── locale               		# 国际化
│   │     ├── lang      	     	# 语言包
│   │     │    ├── enjs   		# 英文
│   │     │    └── zh_CN.js		# 中文
│   │     ├── mixins       		# 各个组件调用的国际化API
│   │     ├── src       		# 源码
│   │     ├── index.js       		# npm包入口文件
│   │     ├── alert.vue      		# 组件源码
│   │     ├── index.js       		# npm包入口文件
│   │     └── package.json   		# npm包描述文件
│   ├── select               		# 选择器(类似于alert)
│   ├── theme                		# 样式
│   │     ├── lib      	     		# 目标文件
│   │     │    ├── alert.css   		# 警告样式
│   │     │    ├── btn.css   		# 按钮样式
│   │     │    ├── index.css   		# 总体样式
│   │     │    └── select.css		# 选择器样式
│   │     ├── src      	     		# 源文件
│   │     │    ├── utils   		# 通用方法和变量
│   │     │    ├── alert.less		# 警告样式
│   │     │    ├── btn.less   		# 按钮样式
│   │     │    ├── index.less   	# 总体样式
│   │     │    └── select.less		# 选择器样式
│   │     ├── gulpfile.js      	    	# 构建配置文件
│   │     └── package.json   		# npm包描述文件
│   └── utils                		# 工具方法
│         ├── lib       		# 目标文件（这里也可以采用lodash的方式，去掉lib文件夹这一层）
│         ├── src       		# 源文件
│         ├── babel.config.js		# 构建配置文件
│         └── package.json   		# npm包描述文件
├── public                   		# 公共资源目录
├── src                      		# 开发态目录
├── .browserslistrc                   	# UI框架目标浏览器配置
├── .cz-config.js                      	# cz定制化提交说明配置
├── .gitignore                      	# git忽略配置
├── .lintstagedrc			# lint-staged配置
├── babel.config.js			# vue cli的babel配置
├── lerna.json				# lerna配置
├── package.json			# vue cli容器描述文件（容器不是npm包）
├── postcss.config.js			# postcss配置
├── README.md				# 说明
└── vue.common.js			# 通用的组件构建配置文件

Основные моменты здесьsrcдокумент,srcФайл можно выбрать в соответствии с потребностями разработки:

• 1. Используйте значение по умолчаниюCLI-сервисДля разработки и демонстрационной демонстрации фреймворка пользовательского интерфейса здесь фреймворк пользовательского интерфейса принимает родной.vueДемо-демонстрация в виде файла, если вы хотите использовать.mdфайл для демонстрации, вы можете использоватьvue-markdown-loader.
• 2. Используйте генератор статических веб-сайтов на основе Vue.VuePress, это в настоящее время не очень стабильно.

выпускать

Публикация может быть выполнена в соответствии сСемантическое управление версиямипровести:

• 1. Можно использовать соответствующие пакеты npmnpm publishбыстрый выпускMINORа такжеPATCHВерсия.
• 2. Если пакет npm имеет несовместимое обновление, вы можете использоватьlerna publishвыпускатьMAJORВерсия.

Пакет npm, опубликованный с помощью инструмента Lerna, рекомендуется публиковать в виде скоупа.Пример UI-фреймворка не дает Демо.Если вы хотите опубликовать его в виде скоупа, вы можете его просмотреть.ziyi2/vue-cli3-lerna-ui, который требуется в каждом пакете npmpackage.jsonВыполните дополнительную настройку вvue-cli3-lerna-ui/plugins/vue-cli-plugin-ui-base/package.jsonизpublishConfigполевая информация.

еслиlerna publishНе удалось опубликовать, например.403Ошибка и т.д.lerna publish from-packageЗаказ выпущен, подробности смотрите в официальном описанииLerna/publish/usage.

Суммировать

По сравнению с дизайном фреймворка пользовательского интерфейса Element, использование Vue CLI 3 и Lerna может упростить настройку фреймворка пользовательского интерфейса и сделать конфигурацию построения каждого компонента пользовательского интерфейса независимой друг от друга.Для простых компонентов пользовательского интерфейса используется конфигурация веб-пакета по умолчанию Vue CLI 3. может быть использован. В то же время он принимает структуру дизайна Monorepo (Why is Babel a monorepo?) вместе с инструментом Lerna может сделать фреймворки пользовательского интерфейса более отзывчивыми для исправления ошибок и выпуска новых функций.

Адрес github для создания практического проекта пользовательского интерфейса:ziyi2/vue-cli3-lerna-ui,включеноpreset.json, подключаемый модуль Vue CLI, разработанный вами, и ряд компонентов пользовательского интерфейса, разработанных вами (немного отличающихся от примера сгенерированной среды пользовательского интерфейса). поднять вопрос, так что я также Это может быть улучшено. Если вы заинтересованы, я надеюсь, что вы можете звезду, спасибо здесь!

Ссылка на ссылку

• Element - github
• руководство по использованию скриптов npm- Жуан Ифэн
• umd - github
• Официальная документация Элемента
• eslint- эслинт документация
• Module Definition Systems- Документация WebPack
• eslint-loader - github
• webpack-node-externals - github
• Externals- Документация WebPack
• babel-plugin-module-resolver - github
• Gulp- Глотковая документация
• Vue CLI 3/dev/цели сборки/библиотеки- Документация Vue CLI
• Vue CLI 3/dev/webpack-related/review конфигурация webpack для проектов- Документация Vue CLI
• Vue CLI 3/Основы/Плагины и пресеты- Документация Vue CLI
• @vue/cli-plugin-babel - Vue CLI Plugin
• @vue/cli-plugin-eslint - Vue CLI Plugin
• cz- Инструмент описания фиксации Git
• cz-customizable- переходник Cz, индивидуальные инструкции
• commitlint- Адаптер Cz, обнаружение инструкций по отправке
• conventional-changelog- Адаптер Cz, генерировать лог
• lint-staged- Инструмент проверки отправки кода
• Руководство по разработке плагинов- Документация Vue CLI
• Семантическое управление версиями- Спецификация выпуска версии
• Vue CLI3/Основы/Службы CLI- Документация Vue CLI
• Why is Babel a monorepo?