Не будет выпускать пакет узлов? зайди и посмотри

внешний интерфейс Командная строка Vue.js NPM

предисловие

npm (Node Package Manager), менеджер пакетов для Node, большинство наших часто используемых общедоступных модулей (плагинов) или пакетов размещаются на нем, поэтому следующий подключаемый модуль, который нужно упаковать, мы просто называем его пакетом npm, это article Начните с этого простого примера и постепенно упаковывайте его — публикуйте — обновляйте — расширяйте — используйте, а затем получите относительно полный пакет npm, начните ниже.

1. Один из самых простых пакетов npm

1.1 Создайте новую папку

Можно найти место для создания папки напрямую.Лучше смысловое,чтобы легче было управлять в дальнейшем.Здесь используем терминал для создания папки:

mkdir toupper-case-project   // 这里我们建了一个名为toupper-case-project的文件夹

(Друзья, которые не знакомы с командной строкой, могут проверить мой блогКомандной строки не будет? Смотри сюда)

1.2 Инициализация проекта

Используйте следующую команду в корневом каталоге проекта

npm init

В это время терминал предложит вам ввести информацию, такую ​​как имя пакета, номер версии и т. д., следующим образом:

Конечно, вы можете пройти весь путь с возвратом каретки или использоватьnpm init -yдля создания значения по умолчаниюpackage.jsonфайлы, эффект тот же, а затем мы получаем следующие файлы, краткое объяснение:

// package.json
{
  "name": "toupper-case-project",  // 包名称，默认和你文件夹同名，可改，但是需要去npm官网搜素这个名称是否已存在，因为包名不能重复
  "version": "1.0.0",  // 项目默认版本号，可改，如果项目后期更新再发布，则需要修改版本号
  "description": "",   // 项目描述，选填，可利于SEO 
  "main": "index.js",  // 你的包的主要入口路径，就是别人安装了你的包后系统会去这个路径找你的代码
  "scripts": {         // 脚本命令，后面会讲到，现在使用默认的就行
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",        // 作者，选填
  "license": "ISC"     // 许可证，默认即可
}

Примечание. Не забудьте удалить комментарии при использовании приведенного выше кода, json нельзя комментировать.

1.3 Создайте новый файл проекта

Новое в корневом каталогеindex.jsа такжеupper.jsЭти два файла выглядят следующим образом:

// upper.js
let toUpper = (a) => {
    return a.toUpperCase();
};
export default toUpper;

// index.js
import toUpper from './upper.js';
export default toUpper;

На данный момент наш проект должен иметь только три файла, а именно:

upper.jsдля логики функций проекта,index.jsдля экспорта функциональных модулей,package.jsonИспользуется для настройки связанной информации, поэтому мы поместили один из самых простыхnpmПакет написан, и следующим шагом является ввод релиза.

1.4 Выпуск

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

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

2. Переключение источника

Это яма. Подсчитано, что на нее наступило много мелких партнеров. Ведь отечественныеnpmСкорость впечатляет, поэтому все запускали знакомую команду:

npm install -g cnpm --registry=https://registry.npm.taobao.org

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

npm config set registry=http://registry.npmjs.org

Но это немного низко, чтобы сокращать взад и вперед, как это, в это времяnrmЭто пригодится,nrmчто это такое? проще говоряnrmЭто инструмент реестра, предназначенный для управления и быстрого переключения частных конфигураций.

cnpm i nrm -g

Использовать после установкиnrm lsКоманда будет выглядеть следующим образом:

*Там, где число, это означает, какой источник является текущим источником (я сейчас в источнике Taobao). Возможно, вы сначала не отображаете *, но независимо от того, отображается он или нет, запустите его напрямую.nrm use npm,после этогоnpm ls, затем нашел*указывая наnpmИсточник включен, и вы можете перейти к следующему шагу в это время.  

3. Войти

npm login

Затем вам будет предложено ввести имя пользователя, пароль (в зашифрованном виде его не видно, просто введите напрямую) и адрес электронной почты, после успешного входа на котором будет отображаться:

  4. Попробуйте опубликовать пакет npm

Запуск в корневом каталоге проектаnpm publishЕго можно выпустить.Если он пойдет хорошо, то он сразу будет успешным.Конечно, могут быть проблемы:

  • Первая проблема с правами доступа, возможно такая ошибка сообщаетсяnpm ERR! Error: EPERM: operation not permitted, тогда вы должны использовать разрешение сантехника для публикации,window + xВы увидите опцию терминала администратора, откройте терминал, затем войдите в систему и опубликуйте.

  • Вторая — проблема с именем, то есть имя вашего пакета уже существует в npm, поэтому вpackage.jsonИзмените имя вашего пакета на другое, а затем опубликуйте его снова, проблем быть не должно.

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

1.5 Использование наших опубликованных пакетов

Просто найдите практический проект, чтобы попробовать:

cnpm i toupper-case-project -D

Установка завершена:

Это означает, что наш пакет можно скачать и установить, а затем попробовать функцию, я попробую прямо в проекте vue, всем должно быть понятно:

Затем запустите проект:

Возьми! Итак, если мы изменим этот пакет позже, что нам делать?

1.6 Пакет обновлений

мы кладемupper.jsИзмените файл:

// upper.js
let toUpper = (a) => {
    return 'Hello' + a.toUpperCase();
};
export default toUpper;

Тогда не забудьте поставитьpackage.jsonНомер версии в файле тоже изменился, обычно можно добавить 1. Буду"version": "1.0.0"изменить на"version": "1.0.1"

беги сейчасnpm publishВы можете напрямую перезаписать новый пакет:

Тогда как нам обновить этот пакет в практическом проекте?

  • Способ 1 (прямое обновление):cnpm update toupper-case-project(иногда может не обновляться полностью)

  • Способ 2 (наложение установки):cnpm i toupper-case-project -D(это надежнее)

Затем запустите проект:

Идеально! Это самый простой пакет npm, не так ли он недосягаем, как вы думаете? Но, если честно, этого пакета очень мало, вы можете видеть, что чужие пакеты были упакованы, протестированы и могут использоваться непосредственно в методе Vue.use(), и есть взаимодействие. Тогда давайте попробуем.

2. Пакет npm на основе webpack и vue

Использование vue-cli напрямую принесет много модулей, которые нам не нужны, что слишком громоздко, поэтому давайте просто возьмем один, если это правильно.webpackЕсли вы еще не знакомы с этим, посмотрите мой постСамое подробное введение в webpack4.x

2.1 Создайте проект (компонент звездного рейтинга)

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

Пожалуйста, перейдите к конкретному кодуgithub, пожалуйста, дайте ★ Звезда ^_~ слева, начните ниже:

Сначала создайте новый с именемstar-evaluationпапка проекта; Затем создайте файл проекта в соответствии со следующей структурой:

|——src
|    |——images
|    |     |——star24_half@2x.png
|    |     |——star24_off@2x.png
|    |     |——star24_on@2x.png
|    |——index.js
|    |——Star.vue
|——.npmignore  // 用于忽略不需要上传到npm的文件
|——package.json
|——README.md
|——webpack.config.js

Файлы следующие:

Star.vueКонкретный код выглядит следующим образом, основная цель — пройти переданные значения после их обработки.classимя класса, затем добавьте вspanначальство.

<!-- Star.vue -->
<template>
  <div class="star">
    <span class="star-item" v-for="(itemClass, index) in itemClasses" :key="index" :class="itemClass"></span>
  </div>
</template>

<script>

// 星星长度
const LENGTH = 5;
// 星星状态
const CLS_ON = 'on';
const CLS_HALF = 'half';
const CLS_OFF = 'off';

export default {
  data () {
    return {
    }
  },
  props: {
    score: {
      type: Number
    }
  },
  computed: {
    itemClasses () {
      let result = [];
      // 如果小数大于或等于0.5则变为0.5，否则为0
      let score = Math.floor(this.score * 2) / 2;
      // 全星
      let integer = Math.floor(score);
      // 半星
      let hasHalf = score % 1 !== 0;
      // 遍历全星
      for (let i = 0; i < integer; i++) {
        result.push(CLS_ON);
      }
      // 处理半星
      if (hasHalf) {
        result.push(CLS_HALF);
      }
      // 补齐，如果星数小于5，则一直循环判断填入数据，直到满足条件
      while (result.length < LENGTH) {
        result.push(CLS_OFF);
      }
      return result;
    }
  }
}
</script>

<style lang="scss" scoped>
  .star{
    font-size: 0;
    .star-item{
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 3px;
      background-repeat: no-repeat;
      background-size: 10px 10px;
      &:last-child{
        margin-right: 0;
      }
    }
    /* 三种图片类型*/
    .on{
      background-image: url(./images/star24_on@2x.png);
    }
    .half{
      background-image: url(./images/star24_half@2x.png);
    }
    .off{
      background-image: url(./images/star24_off@2x.png);
    }
  }
</style>


// index.js
import Star from './Star.vue';
export default Star;

package.jsonЗависимости настроены следующим образом:

{
  "name": "star-evaluation",
  "version": "1.0.0",
  "description": "A plugin which use stars number to evaluate",
  "main": "dist/bundle.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --open --mode development"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Better-Alan/star-evaluation.git"
  },
  "keywords": ["star", "evaluation"],
  "author": "BetterMan",
  "license": "ISC",
  "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",
    "node-sass": "^4.9.4",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue": "^2.5.17",
    "vue-hot-reload-api": "^2.2.4",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.4.2",
    "vue-router": "^3.0.1",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.9",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2"
  }
}

webpack.config.jsКонфигурация следующая, для/srcСодержимое пакета для/dist(Он будет автоматически сгенерирован при упаковке/distпапка) вbundle.js,bundle.jsПо сути, он эквивалентен нашему плагину.

// webpack.config.js
const path = require('path');  // 路径处理模块
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    entry: {
        index: path.join(__dirname, "/src/index.js")   // 入口
    }, 
    output: {
        path: path.join( __dirname, "/dist"), // 打包后的文件存放的地方
        publicPath: '/dist/',  // 设置公共路径
        filename: "bundle.js", // 打包后输出文件的文件名
        libraryTarget: 'umd'   // 将你的library暴露为所有的模块定义下都可运行的方式，它将可在 CommonJS, AMD 环境下运行
    },
    module: {
        rules: [
            {
                test: /\.vue$/,   // vue-loader
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,           // 正则匹配以.css结尾的文件
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(scss|sass)$/,   // 正则匹配以.scss和.sass结尾的文件
                use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {
                test: /\.(png|jpg|svg|gif)$/,  // 图片loader
                use: ['url-loader']
            },
            {
                test: /\.js$/,    
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

.npmignore(не забудьте предыдущую точку) файл используется для игнорирования файлов, правил и.gitignoreТакой же. Если в вашем проекте есть.gitignoreно нет.npmignore, буду использовать.gitignoreКонфигурация.

.*
*.md
node_modules/
src/

README.mdОбъяснение (не обязательно), у всех должно быть на 6 больше, чем у меня.

На данный момент наш каталог должен выглядеть так:

2.2 Зависимости установки

После настройки вышеуказанных файлов вы можете запустить следующую команду для установки зависимостей:

cnpm install

2.3 Упаковка проекта

Упакуйте проект после установки зависимостей:

npm run build

2.4 Войдите и опубликуйте (убедитесь, что вы находитесь в исходном коде npm)

Запуск после завершения упаковкиnpm loginпосле входаnpm publishвыпускать:

Релиз сделан! , можно использовать? Давайте попробуем.

2.5 Попробуйте наш пакет npm

  1. Загрузите сначала:
cnpm i star-evaluation -D

  1. Введено в проект с использованием:

После запуска отображается следующее:

Понял, это лучше, чем предыдущее?toupper-case-projectПлагины настолько высокого класса?   Некоторые друзья могут сказать: «Плагины, которые я обычно вижу, используются не так, многие из них напрямуюVue.use()Его можно использовать позже, а также в плагине есть события. "   Что ж, давайте еще раз изменим?

3. Пакет обновлений

Может действительно использоватьVue.use()Этот способ вызова компонента зависит от того, настроен ли онinstallметод, мы даемStar.vueКомпоненты плюс взгляните на:

3.1 Настройте метод установки

// index.js
import Star from './Star.vue';

Star.install = Vue => Vue.component(Star.name, Star);  // 给Star组件配置install方法，注册该组件 

export default Star;

Примечание: здесь есть на что обратить внимание, т.Star.nameэто указать нам наStar.vueнастроено в файлеnameсвойства, не забудьте настроить его:

Это сделано сейчасVue.use()Теперь давайте добавим взаимодействие события и создадим компонент щелчка, чтобы всплывало определенное значение звезды!

3.2 Добавить события

Конкретные модификации заключаются в следующем:

<!-- Star.vue -->
<template>
  <!-- 绑定showNumber方法 -->
  <div class="star" @click="showNumber">
    <span class="star-item" v-for="(itemClass, index) in itemClasses" :key="index" :class="itemClass"></span>
  </div>
</template>

<script>
...
export default {
  name: 'Star',   // 别忘加上这个属性
  ...
  methods: {
    showNumber() {
      this.$emit('showNumber', '我是弹出的信息');  // 将自定义方法showNumber暴露出去,且将参数传出
    }
  }
}
</script>
...

3.3 Пакет-публикация-использование

Все еще старая процедура, измените номер версии - пакет - выпуск, а затем мы приступаем к практическому проекту.cnpm i star-evaluation -DУстановите его снова, потому что иногдаnpm update star-evaluationСпособ не очень надежный и обновление не полное.

Затем мы используем его в практическом проектеVue.use()Метод и тестовое событие используются в файле подключаемого модуля следующим образом:

<template>
  <div class="hello">
    <!-- 子组件所传出的自定义showNumber方法调用当前showMessage方法 -->
    <Star @showNumber="showMessage" :score="2.6"/>
  </div>
</template>

<script>

import Vue from 'vue'   // 引入Vue
import Star from 'star-evaluation';  // 引入Star插件
Vue.use(Star)  // 使用Star插件

// 以上的引入和注册一般是在main.js中统一完成，这个大家应该都比较熟悉

export default {
  // 因为使用了Vue.use(Star)方式，所以这里不需要使用components: {Star}来注册插件
  methods: {
    // 点击组件触发此方法
    showMessage(mes) {
      alert(mes);
    }
  }
}
</script>

<style scoped>
</style>

тогда мыnpm run devПерезапустите включенный проект и щелкните компонент, чтобы отобразить следующее:

Возьми! Разве это не сложно?

наконец

Изначально я планировал просто расписать основные шаги, но не ожидал, что буду писать (многословно) так долго. Пожалуйста, дайте мне совет, если я пишу не так. Если это может вам помочь, это тоже хлопотно.githubДайте звезду, чтобы я мог уверенно двигать кирпичи ↓-↓

Категории