накопительный пакет + машинописный текст для создания среды разработки пользовательского интерфейса VUE3.0

rollup.js

Благодаря низкой стоимости обучения vue в последние годы стал основным интерфейсным фреймворком в Китае. В последние несколько лет Vue компания тоже будет придумывать какие-то странные идеи.Чтобы удовлетворить странные потребности компании, мы тоже ломаем голову над созданием каких-то универсальных колес. Хотя за этот период были созданы некоторые фреймворки пользовательского интерфейса, вторичная упаковка диаграмм и т. д., одному человеку все еще сложно сравнить их с продуктами, выпущенными крупными производителями. Ведь человеческие и материальные ресурсы находятся не на одной стартовой линии. Сегодня я в основном поделюсь с вами тем, как rollup создает интерфейсный компонент.

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

1. Создайте проект

Перед созданием проекта мы должны убедиться, что версия узла не может быть ниже 10, а операционная система должна быть построена на системе mac/windows.

1.1 Сначала установите Rollup и создайте файл входа

Адрес документа официального сайта Rollup

  • 1. Установите накопительный пакет глобальноnpm install rollup --global

Запустить после завершения установкиrollup -vУбедитесь, что установка прошла успешно

  • 2. Создайте папку проекта и создайте ее в папкеrollup.config.js
  • 3. Создайте файл записи./src/index.ts
  • 4. Создайте пакет npm и запуститеnpm init

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

1.2 Установите и настройте плагины, связанные с Rollup

  1. Во-первых, это, конечно, поддержка машинописного текста, в которой мы нуждаемся больше всего.@rollup/plugin-typescript
  2. @rollup/plugin-babelДля бесшовной интеграции между rollup и bable
  3. rollup-plugin-postcssРазобрать файл предварительной обработки cssless,scss
  4. @rollup/plugin-commonjsПреобразование модулей CommonJS в ES6, что удобно для прямого вызова сводки.
  5. @rollup/plugin-node-resolveВнедрение сторонних модулей
  6. cssnanoплагин для postcss
  7. @vue/babel-plugin-jsxПлагин компиляции babel для vue3.0 jsx.

1.3 Написание нашегоrollup.config.jsконфигурационный файл

для того, чтобы сделать нашrollup.config.jsПрофиль кажется простым, мы создаем каталог в каблукеbuildconfigПапка используется для хранения импорта и конфигурации наших компонентов и выходной конфигурации свертки.acorn-jsxЭто синтаксический анализатор JSX, официально рекомендованный накопительным пакетом для анализа исходного кода в JSX AST.

import jsx from "acorn-jsx";
import plugins from "./buildconfig/plugins";
import output from "./buildconfig/output";
export default {
  input: "src/index.ts",
  output,
  plugins,
  acornInjectPlugins: [jsx()],
  external: ["vue", "@antv/g2"],
};

1.4 Введение накопительных плагинов и настройка плагинов

Потому что мы хотим разработать библиотеку компонентов vue3.0, и мы хотим использовать ts и tsx для разработки компонентов. Установите зависимости и конфигурации в соответствии с инструментами, предоставляемыми Vue Guandang.

  1. Установить@vue/babel-plugin-jsx,vue@next

Создайте.babelrcСделайте следующую конфигурацию, чтобы при запуске rollup плагин bable для rollup запускал этот плагин.

{ "plugins": [["@vue/babel-plugin-jsx"]] }

``` js
import typescript from "@rollup/plugin-typescript";
import babel from "@rollup/plugin-babel";
import postcss from "rollup-plugin-postcss";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import cssnano from "cssnano";

const extensions = [".ts", ".js", ".tsx"];
export default [
  typescript({
    lib: ["es5", "es6", "dom"],
    target: "es5", // 输出目标
    noEmitOnError: true, // 运行时是否验证ts错误
  }),
  resolve({ mainFields: ["module", "main", "browser"] }),
  commonjs({ extensions, sourceMap: true }),
  babel({ babelHelpers: "bundled", extensions }), // babelHelpers是bable的最佳实践方案 extensions编译的扩展文件
  postcss({
    plugins: [cssnano],
    extract: "dist/css/z-style.css", //css 输出路径
  }),
];

1.5 выходная конфигурация свертки

globalsИзвлеките глобальный пакет, вывод полностью зависит от правила вывода накопительного пакета, [iife,es,umd] В соответствии с тремя различными сценариями использования упаковки,iifeИспользуйте на стороне браузера,esСоответствует коду модуля es на месте упаковки.umdЭто общая спецификация определения модуля javascript.

const globals = {
  vue: 'Vue',
  '@antv/g2': 'G2',
};
const path = 'dist/'; // 编译后代码存放地址
const output = [];

if (process.env.NODE_ENV === 'production') {
  ['iife', 'es', 'umd'].forEach((item) => {
    output.push({
      dir: path + item,
      format: item,
      globals,
      name: 'chartv',
    });
  });
} else {
  output.push({
    dir: path,
    format: 'es',
    globals,
    name: 'chartv',
  });
}

export default output;

2. Разработать компоненты vue3.0

Вышеупомянутое построение нашей среды разработки с набором скриптов vue3.0. Давайте начнем разрабатывать компоненты vue3.0. Прежде чем разрабатывать компоненты, я надеюсь, что вы знакомы с API vue3.0

адрес документа

Официальная китайская документация

Официальная документация на английском языке

2.1 создатьchartкомпоненты

Создано в src/packagechartПапка, создайте новую папку под папкойindex.tsx

import { defineComponent, watch, computed, App } from "vue";

const chartProps = {}

const Chart = defineComponent({

	name: 'chart',
    
	props: chartProps,
    
    methods: {
    	chickChart() {
        	alert('chickChart');
        }
    },
	render() {
    	const { chickChart } = this;
    	return <div onClick={chickChart}>Chart</div>;
    }
});

Chart.install = (app: App) => {
	app.component(Chart.name, Chart);
}

export default Chart;

2.2 Измените файл ввода и зарегистрируйте компонент vue

import chart from '@/package/chart';
import { App, DefineComponent } from 'vue';

const component: Array<DefineComponent | any> = [chart];
const version = '0.0.1';

const install = (app: App) => {
  component.map((item) => {
    app.use(item);
  });
};

export default {
  install,
  version,
};

2.3 Скомпилируйте исходный код

в пакете.jsonscripts -> "dev": "rollup -c --watch"даrollupКоманда для компиляции кода, запускаемyarn dev, выведет скомпилированный код в папку, указанную в output.

бегатьyarn buildРазличные сценарии компонентов, которые нам нужны, будут созданы в указанной папке.

3. Подробный код можно посмотретьгитхаб-адрес

Категории