Создайте библиотеку компонентов от 0 до 1

внешний интерфейс JavaScript
Создайте библиотеку компонентов от 0 до 1

Статьи были включены вgithub, Добро пожаловать в Watch and Star.

Введение

От реализации базовой структуры проекта -> поддержки мультистандартной упаковки -> реализации загрузки по требованию -> публикации пакетов npm вам потребуется создать библиотеку компонентов от 0 до 1.

Построить проект

  1. Инициализировать каталог проекта

    mkdir lyn-comp-lib && cd lyn-comp-lib && npm init -y

  2. Создайте новый каталог пакетов

    Каталог пакетов — это каталог компонента, компонент — это папка, а папка — это компонент

    mkdir packages

  3. Новый /src/index.js

    /src/index.js как запись упаковки для спецификации commonjs

    mkdir src && cd src && touch index.js

  4. Новый webpack.common.js

    файл конфигурации webpack для спецификации commonjs

    touch webpack.common.js

  5. Новый webpack.umd.js

    специфичный для umd файл конфигурации веб-пакета

    touch webpack.umd.js

  6. Новый опубликовать.sh

    Отвечает за создание проектов и публикацию пакетов npm.

    touch publish.sh

  7. Установить вебпак, webpack-cli

    npm i webpack webpack-cli -D

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

начать кодирование

В настоящее время мы просто проверяем дизайн архитектуры, поэтому мы напишем только несколько простых демонстраций.

компоненты

Создайте два новых каталога в каталоге пакетов в качестве каталогов компонентов.

На самом деле эта структура каталогов относится к библиотеке компонентов element-ui в рамках подготовки к поддержке загрузки по запросу.

  1. /packages/hello/src/index.js
// hello function
export default function hello (msg) {
    console.log('hello ', msg)
}
  1. /packages/log/src/index.js
// log function
export default function log (str) {
    console.log('log: ', str)
}

Импорт и экспорт компонентов

Внедряйте и экспортируйте компоненты проекта единообразно в /src/index.js.

// 当组件变得庞大时这部分可自动生成，element-ui 就是采用自动生成的方式
import hello from '../packages/hello/src/index'
import log from '../packages/log/src/index'

export default {
    hello,
    log
}

Напишите файл конфигурации веб-пакета

  1. /webpack.common.js

    const path = require('path')

module.exports = {
    entry: './src/index.js',
    // 使用 开发者 模式，目的是为了一会儿的调试，实际开发中可改为 production
    mode: 'development',
    output: {
        path: path.join(__dirname, './lib'),
        filename: 'lyn-comp-lib.common.js',
        // commonjs2 规范
        libraryTarget: 'commonjs2',
        // 将 bundle 中的 window 对象替换为 this，不然会报 window is not defined
        globalObject: 'this',
        // 没有该配置项，组件会挂载到 default 属性下，需要 comp.default.xxx 这样使用，不方便
        libraryExport: 'default'
    }
}

  2. /webpack.umd.js

const path = require('path')

module.exports = {
    // 实际开发时这部分可以自动生成，可采用 element-ui 的方式
    // 按需加载 需要将入口配置为多入口模式，一个组件 一个入口
    entry: {
        log: './packages/log/src/index.js',
        hello: './packages/hello/src/index.js'
    },
    mode: 'development',
    output: {
        path: path.join(__dirname, './lib'),
        filename: '[name].js',
        // umd 规范
        libraryTarget: 'umd',
        globalObject: 'this',
        // 组件库暴露出来的 全局变量，比如 通过 script 方式引入 bundle 时就可以使用
        library: 'lyn-comp-lib',
        libraryExport: 'default'
    }
}

package.json

{
    "name": "@liyongning/lyn-comp-lib",
    "version": "1.0.0",
    "description": "从 0 到 1 搭建组件库",
    "main": "lib/lyn-comp-lib.common.js",
    "scripts": {
        "build:commonjs2": "webpack --config webpack.common.js",
        "build:umd": "webpack --config webpack.umd.js",
        "build": "npm run build:commonjs2 && npm run build:umd"
    },
    "keywords": ["组件库", "0 到 1"],
    "author": "Li Yong Ning",
    "files": [
      "lib",
      "package.json"
    ],
    "repository": {
      "type": "git",
      "url": "https://github.com/liyongning/lyn-comp-lib.git"
    },
    ...
}

объяснять

  1. name

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

  2. main

    Сообщите потребителю ( import hello from '@liyongning/lyn-comp-lib' ), где загрузить библиотеку компонентов

  3. script

    команда сборки

  4. files

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

  5. repository

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

Создайте скрипт публикации publish.sh

Сценарий оболочки, отвечающий за создание библиотеки компонентов и публикацию библиотеки компонентов в npm.

#!/bin/bash

echo '开始构建组件库'

npm run build

echo '组件库构建完成，现在发布'

npm publish --access public

README.md

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

построить, опубликовать

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

sh publish.sh

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

...
npm notice total files:   5                                       
npm notice 
+ @liyongning/lyn-comp-lib@1.0.0

тестовое задание

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

Новый проект

  1. Инициализировать каталог проекта

    mkdir test && cd test && npm init -y && npm i webpack webpack-cli -D && npm i @liyongning/lyn-comp-lib -S

    Проверьте журнал или package.json. Вы обнаружите, что библиотека компонентов была успешно установлена, и следующим шагом будет ее использование.

  2. Новый /src/index.js

    import { hello } from '@liyongning/lyn-comp-lib'
console.log(hello('lyn comp lib'))

  3. Построить

    npx webpack-cli --mode development

    В каталоге /dist будет сгенерирован упакованный файл mian.js, затем создайте новый файл index.html в каталоге /dist и импортируйте main.js, затем откройте его в браузере, откройте консоль, и вы найдете следующий вывод:

  1. Загружать ли по запросу

    Мы ввели и использовали метод hello только в /src/index.js и искали в main.js.hello functionа такжеlog functionВы обнаружите, что можете найти его, указав, что теперь он полностью импортирован, а затем загрузить его по запросу в соответствии с конфигурацией документа об использовании (README.md).

    На этом рисунке также видно, что импорт представляет собой пакет commonjs, а не "./node_modules/@liyongning/lyn-comp-lib/lib/hello.js".

  2. Загрузка по требованию настраивается в соответствии с документацией по использованию библиотеки компонентов.

    Установитьbabel-plugin-component

    Установитьbabel-loader、@babel/core

    npm install --save-dev babel-loader @babel/core

    // webpack.config.js
const path = require('path')

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
}

    Установить@babel/preset-env

    {
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "@liyongning/lyn-comp-lib",
        "style": false
      }
    ]
  ]
}

6. 配置 package.json 的 script

   ```json
   {
       ...
       scripts: {
           "build": "webpack --config webpack.config.js"
       }
       ...
   }

  1. выполнить команду сборки

    npm run build

  2. Повторите шаг 4 выше, вы обнаружите, что упакованный файл толькоhello function,нетlog function

    И фактический размер упаковки также меньше

Хорошо, цель достигнута! ! Если у вас есть какие-либо вопросы, пожалуйста, задавайте вопросы и продвигайтесь вперед вместе

Связь

Всем спасибо:подобно,собиратьа такжеКомментарий, увидимся в следующий раз.

Когда обучение становится привычкой, знание становится здравым смыслом, отсканируйте код и подпишитесь на общедоступную учетную запись WeChat, чтобы учиться и развиваться вместе. Статьи были включены вgithub, Добро пожаловать в Watch and Star.

微信公众号

Категории