«Vue Advanced» 5 минут до плагина Vue CLI

Vue.js
«Vue Advanced» 5 минут до плагина Vue CLI

предисловие

если вы используетеVueрамки, то вы должны знатьVue CLIчто.Vue-cli 3, который является стандартным инструментом (скаффолдингом) для разработки Vue.js, обеспечивающим создание каркасов проекта и прототипирование.

В дополнение к ежедневным проектам по сборке и упаковке,Vue CLI3Важной частью являетсяcli-plugins, разработка плагинов.

Эта статья научит вас, как создать научноVue-CLI 插件и независимость от проектаnpmСумка.

1. Что такоеCLI plugin

он может изменить внутреннююwebpackнастроить и ввести команды вvue-cli-service. Хороший пример@vue/cli-plugin-typescript: когда вы его вызовете, он будетtsconfig.jsonДобавьте один в свой проект и изменитеApp.vueтип, весь процесс не нужно выполнять вручную.

Плагины очень полезны, но есть много разных ситуаций:Electronзастройщик, добавьUIбиблиотека, напримерiviewилиElementUI....что делать, если вы хотите предоставить плагин для конкретной библиотеки, но он не существует? В настоящее время хорошим выбором является создание плагина для собственного проекта.

В этой статье мы построимvue-cli-plugin-rx. Это позволяет нам добавить в проектvue-rxбиблиотеку и получить ее в нашем приложении VueRxJSслужба поддержки.

2. Структура каталогов плагинов Vue-cli

CLIПлагин — это@vue/cliПроекты, добавляющие дополнительные функцииnpmСумка. Он всегда должен содержать:

  • ОдинServiceплагин в качестве основного экспорта
  • необязательный содержитGeneratorиPromptдокумент.
.
├── README.md
├── generator.js  # generator (可选)
├── prompts.js    # prompt 文件 (可选)
├── index.js      # service 插件
└── package.json

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

.
├── README.md
├── generator
│   └── index.js  # generator
├── prompts.js    # 命令行提示安装
├── index.js      # service 插件
└── package.json

2.1 GeneratorAPI

Плагин CLI, опубликованный как пакет npm, может содержатьgenerator.jsилиgenerator/index.jsдокумент. Генератор внутри плагина будет вызываться в двух сценариях:

  • При первоначальном создании проекта, еслиCLIПлагины создаются как проектыpresetчасть установлена.
  • Плагин передается после создания проектаvue invokeУстанавливается при вызове самостоятельно.

GeneratorAPIразрешить одинgeneratorВ направленииpackage.jsonДобавьте дополнительные зависимости или поля и добавьте файлы в проект.

2.2 Сервисный плагин

Service 插件Функция, которая принимает два аргумента:PluginAPIэкземпляр и объект, содержащий параметры, локальные для проекта. Он может расширять/изменять внутренности различных сред.webpackconfig и внедрить в него другие командыvue-cli-service.

Но здесь мы просто хотим добавить некоторые зависимости и примеры компонентов, если это необходимо. так что нашindex.jsЭто выглядит так:

module.exports = (api, opts) => {}

Если вы хотите изменить внутреннийwebpackДля настройки или других операций, пожалуйста, прочитайте официальную документацию Vue CLI.В этой секции

2.3 Package.json

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

{
  "name": "vue-cli-plugin-rx",
  "version": "1.0.0"，
  "description": "",
  "main": "index.js",
  "keywords": [
    "vue",
    "vue-cli",
    "rxjs",
    "vue-rx"
  ],
  "author": "",
  "license": "ISC"
}

3. Добавляем зависимости через генератор

generatorПомогает нам добавлять зависимости и изменять файлы проекта. Итак, первый шаг, который нам нужен, это чтобы наш плагин добавил зависимости:rxjsиvue-rx(вы также можете добавить другие):

// generator/index.js
module.exports = (api, options, rootOptions) => {
  api.extendPackage({
    dependencies: {
      'rxjs': '^6.3.3',
      'vue-rx': '^6.1.0',
    },
  });
}

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

api.extendPackageметод изменит проектpackage.json.

В примере этой статьи мы добавляем две зависимости кdependencies.

Теперь нам нужно изменитьmain.jsдокумент. так какRxJSДля работы в компонентах Vue нам нужно импортироватьVueRxи позвониVue.use(VueRx)

  • Сначала мы создаем строку, которую хотим добавить в основной файл:
let rxLines = `\nimport VueRx from 'vue-rx';\n\nVue.use(VueRx);`;
  • использоватьapi.onCreateCompletehook. Вызывается при записи файла на диск:
api.onCreateComplete(() => {
    const fs = require('fs');
    const mainPath = api.resolve(''./src/main.js');
};
  • Теперь изменим содержимое файла:
api.onCreateComplete(() => {
    const fs = require('fs');
    const mainPath = api.resolve('./src/main.js');
    // 获取内容
    let contentMain = fs.readFileSync(mainPath, { encoding: 'utf-8' });
    const lines = contentMain.split(/\r?\n/g).reverse();
    // 注入import
    const lastImportIndex = lines.findIndex(line => line.match(/^import/));
    lines[lastImportIndex] += rxLines;
    // 修改应用
    contentMain = lines.reverse().join('\n');
    fs.writeFileSync(mainPath, contentMain, { encoding: 'utf-8' });
  });
};

4. Протестируйте cli-плагин локально

Сначала мы создаем простой проект Vue-cli:

vue create test-app

cd в папку проекта и устанавливаем наш только что созданный плагин:

cd test-app
npm install --save-dev file://Users/hiro/练习/测试/vue-plugin

После установки плагина его нужно вызвать:

vue invoke vue-cli-plugin-rx

Теперь вы проверяетеtest-appПроектmain.js, ты увидишь:

import Vue from 'vue'
import App from './App.vue'
import VueRx from 'vue-rx';
Vue.use(VueRx);

Также смpackage.jsonнайду:

"dependencies": {
    "core-js": "^2.6.5",
    "rxjs": "^6.3.3",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vue-rx": "^6.1.0",
    "vuex": "^3.0.1"
  }

5. Создайте образцы компонентов с помощью генераторов

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

5.1 Написание примеров компонентов

Этот образец компонента мы создали. он должен быть расположен в проектеsrc/componentsфайлы в папке.

Так что мы можемgeneratorкаталог, создать/template/src/components:

это простоRxJSПриводной счетчик с двумя кнопками

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

<template>
    <section>
        <h1>Click on 'Count' button to count your clicks</h1>
        <button v-stream:click="count$">Count clicks</button>
        <button @click="clearCounter">Clear counter</button>
        <p>{{result$}}</p>
    </section>
</template>

<script>
import {
  filter,
  bufferWhen,
  debounceTime,
  map,
  startWith,
} from 'rxjs/operators';
export default {
  domStreams: ['count$'],
  subscriptions() {
    return {
      result$: this.count$.pipe(
        filter(event => !!event),
        bufferWhen(() => this.count$.pipe(debounceTime(400))),
        map(clicks => clicks.length),
        startWith(0),
      ),
    };
  },
  methods: {
    clearCounter() {
      this.count$.next(null);
    },
  },
};
</script>

<style>
button {
  padding: 10px;
  font-size: 14px;
  margin-right: 10px;
  border-radius: 4px;
  outline: none;
}
</style>

не волнуетRxJSЧто ты сделал (я так и не понял),vans.

В этот момент нам нужно изменитьgenerator/index.js, чтобы он мог распознавать и записывать в папку.

api.render('./template', {
  ...options,
});

когда ты звонишьapi.render('./template')час,generatorбуду использоватьEJSоказывать./templateфайлы в (по сравнению сgeneratorпуть к файлу в анализе)

5.2 Установка из командной строки

Что, если пользователь — ветеран и не хочет иметь образец компонента? В процессе установки плагина мы можемprompts.jsДобавьте код приглашения для выбора пользователем в командной строке:

module.exports = [
  {
    name: `addExample`,
    type: 'confirm',
    message: '是否添加示例组件到项目components目录？',
    default: false,
  },
];

Спросите пользователя, хотят ли они добавить образец компонента в проект.componentsПод содержанием. По умолчанию:false.

Затем нам нужно изменитьgenerator/index.js:

if (options.addExample) {
    api.render('./template', {
      ...options,
    });
}

На этом этапе мы отменяем установку и повторно запускаем

yarn add --save-dev file://Users/hiro/练习/测试/vue-plugin

vue invoke vue-cli-plugin-rx

увидим:

В этот момент вы просматриваете проектcomponentsкаталог, вы найдете больше примеров файлов компонентов

6. Как публиковать плагины

из официальной документации

чтобы сделатьCLIПлагины могут использоваться другими разработчиками, вы должны следоватьvue-cli-plugin-<name>Соглашение об именах для публикации в npm. Как только плагин следует соглашению об именах, он может:

  • одеяло@vue/cli-serviceНаходить;
  • Поиск другими разработчиками;
  • пройти черезvue add <name>илиvue invoke <name>Установите его вниз.

вам просто нужноpackage.jsonДобавить описаниеdescription, и создайте его в корневом каталоге проекта плагинаlogo.png.

Далее идет регистрацияnpmjs.com

2、设置仓库地址为npm官方仓库地址(国内大部分都使用阿里淘宝镜像，如果没改publish会失败)
npm config set registry https://registry.npmjs.org/

3、登陆npm,用户名密码邮箱需要全部匹配
npm whoami
npm login
Username: xxxxx
Password:
Email: (this IS public) xxx@gmail.com
Logged in as xxxxx on https://registry.npmjs.org/.

4、登陆完可以publish了,执行以下命令
cd dist && npm publish && cd ../
或npm publish dist
输出以下信息说明发布成功
+ ngx-xxx@0.0.1
这时登录https://www.npmjs.com/可以看到自己发布的项目

Сделанный.

Суммировать

Vue-CLIРазработка плагинов, для многих проектов, когда нужно внедрить какие-то компоненты или функции, которые вы написали ранее, но не хотите копировать зановоmain.jsиPackage.json, научился этому трюку, развитие воров быстро. Когда кто-то спрашивает вас, как организовать библиотеку компонентов вашего проекта, tsk... вы говорите, что устанавливаете плагины, которые пишете сами.

Сборник статей автора Nuggets

публика

Категории