Опубликовать компонент vue с помощью npm

NPM

предисловие

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

Поэтому при написании этой статьи [2019-08-18] я пересобрал пакет npm и выпустил пакет npm в соответствии со следующим процессом, который также был протестирован и доступен, поэтому детская обувь может быть уверена, что будет следовать шаг за шагом и учиться опубликовать пакет npm.Код проекта пакета здесь,Адрес пакета npm, который был выпущен онлайн, находится здесь.

Я считаю, что фронтендеры не будут незнакомы с пакетами npm,npmПервоначально это был инструмент управления пакетами для Node.js, но с активным развитием JS в последние годы npm теперь стал инструментом управления почти всеми инструментами и пакетами, связанными с JS, и на этот раз он также будет от 0 до 1 пройти процесс отправки посылки,

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

2,⚠️Советы: Чтобы детская обувь могла понять процесс и конфигурацию упаковки, рекомендуется выполнить шаги (1)-(10).Чтобы выделить весь процесс упаковки, упакованные тестовые компоненты очень просты. После понимания содержимого и конкретных принципов работы всех файлов и успешного выпуска тестового пакета npm детская обувь может заменить его своими компонентами и опубликовать собственный пакет npm.Имя дистрибутива задано какour-btn

Инициализировать проект webpack + упаковка компонентов === за один раз

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

  • (1) Ниже приведена рекомендуемая структура каталогов, и файл проекта создается в соответствии со следующей структурой.

Однако, поскольку компоненты этой статьи слишком просты, она удалена.assets,utilsПапки (наличие этих двух папок не влияет на npm-пакет, вам только удобно организовать код проекта самостоятельно)

├── src
│ ├── assets # 本地静态资源（本文没有）
│ ├── components # 业务通用组件
│ │ ├── btnDemo.vue # 本文需要封装的简单button组件
│ ├── utils # 工具库（本文没有）
│ └── index.js # 应用入口 
├── .npmignore // 用于忽略不需要上传到npm的文件
├── README.md
├── package-lock.json
├── package.json
└── webpack.config.js # webpack配置

// 注意
# utils 文件夹一般存放的是你组件经常使用的一些工具函数
# assets 文件夹一般存放的是你组件用到的样式、图片、icon等静态资源
  • (2)button组件
// btnDemo.vue
<template>
  <div class="btn">
    <button>{{text}}</button>
  </div>
</template>

<script>
export default {
  name: 'btn', // 组件的name属性（后面有提到这里有个坑）
  props: {
    text: { // 文本
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
    }
  }
}
</script>
  • (3)index.js

Этот файл предназначен для демонстрации наших компонентов

// src/index.js
// 这里import 的 btn和btnDemo.vue的name属性名相同 ！

import btn from './btnDemo.vue'

btn.install = Vue => Vue.component(btn.name, btn) // 给组件配置install方法 

export default btn;

⚠️ (Здесь яма): Потому чтоVue.component(btn.name, btn)изbtn.nameуказывает наbtnDemo.vueизnameсвойства, поэтому рекомендуется использоватьnameзначение атрибута какimportпсевдоним

  • (4)webpack.config.js

webpack.config.jsКонфигурация выглядит следующим образом, так как версия, которую мы используем,webpack4, все конфигурации вwebpack.config.jsВнутри нам нужно только упаковать наши ресурсы здесь, и написание относительно простое.webpackДетали конфигурации можно узнатьофициальная документация

Эта конфигурация используется для/srcСодержимое пакета для/dist(Он будет автоматически сгенерирован при упаковке/distпапка) вbtn.js,btn.jsПо сути, он эквивалентен нашему плагину (позже вpackage.jsonизmainФилд тоже указывает сюда)

// webpack.config.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: {
    index: path.join(__dirname, "/src/index.js") // 入口文件（就是刚才用于暴露组件的index.js）
  }, 
  output: {
    path: path.join( __dirname, "/dist"), // 打包后的文件存放在dist文件夹
    publicPath: '/dist/', // 设置公共路径
    filename: "btn.js", // 打包后输出文件的文件设置为btn.js
    libraryTarget: 'umd' // 这个选项会尝试把库暴露给前使用的模块定义系统，这使其和CommonJS、AMD兼容或者暴露为全局变量
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(scss|sass)$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        use: ['url-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}
  • (5)package.json

package.jsonПоля следующие, следует подчеркнуть, что поляdevDependenciesЗависимости в не уникальны, вы можете написать в соответствии со своей ситуацией,Но в этот момент, пожалуйста, будьте как я, это также для того, чтобы вы могли следить за моей операцией и успешно отправить посылку.

// 具体字段后面详细说明
{
  "name": "our-btn", // 发布npm包的名字
  "version": "1.0.0", // 你的npm包版本
  "description": "A test button", // 包的描述
  "main": "dist/btn.js", // *重点*：指定你组件的主入口文件
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "our-btn",
    "button"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/thomaszhou63/test-npm.git"
  },
  "author": "thomaszhou",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.2.0",
    "vue": "^2.5.2",
    "vue-hot-reload-api": "^2.2.4",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.9",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0"
  }
}
  • Параметр Описание
    • name- Название пакета (название пакета должно быть в кебабном регистре, то есть английские слова все в нижнем регистре или разделены тире)
    • version- номер версии пакета (рекомендуется для первой версии1.0.0, специальные правила именованияСмотри сюда)
    • description- Описание пакета. существуетnpmjs.comотображается при поиске в Интернете, что помогает пользователям фильтровать при поиске)
    • keywords- Ключевые слова (ищите ключевые слова вашего пакета npm на веб-сайте npm)
    • author- Автор пакета. Формат, как правило,name <你的邮箱>, в общем, сvue/reactКогда scaffolding создает проект, он будет записан в этом формате по умолчанию.Конечно, это также может быть адрес github, или его можно настроить, но это не так стандартно.
    • license- авторская лицензия,MITещеISC, или что-то еще, но я вижу много пакетовMIT
    • contributors- другие участники пакета (я этого не писал)
    • repository- код пакетаRepoинформация, в том числеtypeа такжеURL,typeвозможноgitилиsvn,URLупакованRepoадрес
      • Я написал это здесьgitАдрес склада, где размещен код проекта моего компонента, чтобы на странице пакета npm была запись github
    • main- В этом поле указывается основной входной файл программы (желательно написанныйdist文件夹сжатые файлы)
      • mainОпределите входной файл пакета,NodeJsокружение, заявлениеimport [pkg] from '[package]'Когда, по сути, импортируется файл, определяемый main
    • scripts- указывает аббревиатуру командной строки npm для запуска команды скрипта. Такие какnpm start,npm run dev,npm run buildЖдать
    • dependencies / devDependencies- Список зависимостей среды производства/разработки. они будут установлены вnode_moduleПод содержанием
      • Для разработчика,dependenciesа такжеdevDependenciesНа самом деле особой разницы нет, т.к. в реализацииnpm install/yarn addскачает все
      • dependenciesэто зависимость, которая должна быть установлена ​​для запуска вашего пакета, т.е. когда пользовательnpm install [package]илиyarn add [package], эти зависимости также загружаются
      • devDependenciesэто зависимость, которую необходимо установить при разработке пакета, напримерeslint, jestи другие средства разработки, когда пользовательnpm install [package]илиyarn add [package], эти зависимости не скачиваются!

Моя версия здесь 1.0.1, потому что я повторил версию позже.Если вы первая версия, лучше быть 1.0.0

  • (6)README.md

это моеREADME.mdНапишите что-нибудь, в конечном итоге будет отображаться в контенте npm, введенном внутри (то есть выше), детская обувь, если вы предлагаете цену, пожалуйста, напишитеREADME.mdХа, в конце концов, это для людей.

## our-btn
>一个测试的npm包

# install

​```
npm install our-btn
​```
# use
​```
// main.js
import btn from 'our-btn'

Vue.use(btn)
​```
​```
// demo.js
<template>
  <div class="demo">
    <btn :text="msg"></btn>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      msg: '成功'
    }
  }
}
</script>
​```
  • (7).npmignore

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

Но что, если ваш проект не.npmignoreфайл, но с.gitignoreфайл, он будет проигнорирован при публикации.gitignoreфайл, определенный в; то есть,.npmignoreприоритет выше, чем.gitignoreиз.

.*
*.md
node_modules/
webpack.config.js
src/
  • (8) Зависимости установки

После настройки вышеуказанных файлов вы можете запустить следующую команду для установкиpackage.jsonЗатем зависимости генерируются в вашем каталоге.node_modulesпапка,package-lock.jsonдокумент

npm install
  • (9) Упаковка наших компонентов
npm run build
  • (10) Структура каталогов

На следующем рисунке показана моя структура каталогов, в которой.gitattributesа также.gitignoreНа файлы можете не обращать внимания, потому что я выложил этот проект в репозиторий github, так что там эти два файла.

Доступен ли локальный тестовый компонент

Выполните следующую команду в проекте

npm run build // 打包
npm pack // 本地生成一个our-btn-1.0.1.tgz的包

Вы создаете новый локальноvue/reactпроект, потому что я являюсь компонентом vue, поэтому я создам новый проект vue с именемtest-btn, мы положилиour-btn-1.0.1.tgzПоставить наш местный проектtest-btnсередина

npm install our-btn-1.0.1.tgz
npm run dev // 启动vue项目

тогда в проектеmain.jsимпортировать наш пакет

// src/main.js
// 注意：btn要保持和之前咱们封装组件的index.js一样
import btn from 'our-btn' // 引入包

Vue.use(btn)

Ссылайтесь на этот компонент на нашей демонстрационной странице.

// demo.vue
<template>
  <div class="demo">
    <btn :text="msg"></btn> 
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      msg: '成功'
    }
  }
}
</script>

Если тест доступен, в тестовом проектеtest-btnвбегаетnpm uninstall our-btnУдалите плагин, затем вы можете опубликовать пакет NPM

Опубликовать в нпм

  • (1) Зарегистрируйте учетную запись npm

Перед публикацией вы должны зарегистрировать npm-аккаунт, иначе как вы можете его загрузить, рекомендуется перейти наОфициальная регистрация на сайтеУчетная запись (кстати, знакомая с сайта), после регистрации учетной записи мы войдем локально и опубликуем наши компоненты

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

error: no_perms Private mode enable, only admin can publish this module

Поэтому вам нужно переключиться на источник npm черезnpm config set registry http://registry.npmjs.orgЗаказ

  • (2) Начать публикацию

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

npm login // 登陆npm
// 然后输入你的账号、密码、邮箱
// 当你在控制台看到 Logged in as <Username> on https://registry.npmjs.org  说明登陆成功

// 如果你保证是最新版本且已经打包过，则跳过npm run build这一步
npm run build 
npm publish // 发布你的包（如果你出现👇，显示 +[package]@版本信息 ，那就发布成功了）

👇 Вот мой ввод и соответствующий ему дисплей

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉 На данный момент ваш пакет успешно выпущен! ! ! 🎉🎉🎉🎉🎉🎉🎉🎉🎉

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

​ Способ 1: каждый разnpm publishраньше меняй вручнуюpackage.jsonверсия

​ Способ 2: опубликовать с помощью следующей команды

假设初始版本为1.0.0
➜ npm version preminor （执行这个命令，就会价格当前包发布为版本v0.1.0-0）
v1.0.0-0
➜ npm version prepatch
v1.0.1-0
➜ npm version patch    （执行这个命令，就会价格当前包发布为版本v1.0.1）
v1.0.1

Проверьте npm && используйте наши пакеты

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

Вы создаете новый локальноvue/reactпроект, потому что я являюсь компонентом vue, поэтому я создам новый проект vue.Конкретный метод использования пакета (возьмите мой тестовый пакет в качестве примера)

npm install our-btn // 安装我们的包

тогда в проектеmain.jsимпортировать наш пакет

// src/main.js
// 注意：btn要保持和之前咱们封装组件的index.js一样
import btn from 'our-btn' // 引入包

Vue.use(btn)

Ссылайтесь на этот компонент на нашей демонстрационной странице.

// demo.vue
<template>
  <div class="demo">
    <btn :text="msg"></btn> 
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      msg: '成功'
    }
  }
}
</script>

如果错误请指正，我也好纠错更新

如有讲的不明白的，请留言，我看到会回复

over

Категории