Как молодые люди упаковывают и выпускают компонент vue от 0 до 1

Vue.js
Как молодые люди упаковывают и выпускают компонент vue от 0 до 1

Инкапсуляция и публикация компонентов — очень важная возможность в разработке интерфейса.Инкапсуляция общих компонентов позволяет повысить эффективность командной разработки, избегая дублирования работы и неудобного обслуживания. Хорошая абстракция и инкапсуляция компонентов позволяет использовать компоненты более широко и быть совместимыми с несколькими средами.
В этой статье описывается, как шаг за шагом упаковать и выпустить общий компонент всплывающего уведомления от 0 до 1.Эта статья написана с примерами, поэтому теоретически вы можете успешно упаковать и опубликовать свой собственный компонент vue на основе этой статьи.
В конце статьи для справки указан соответствующий адрес проекта.

создание компонента

Создать пустой файл

mkdir ToastComponent
cd ToastComponent/

Инициализировать package.json

npm init -y

код показывает, как показано ниже:

{
  "name": "ToastComponent",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Создайте новый каталог src и запишите в него два файла index.js и toast.vue, каталоги следующие:

├── package.json
└── src/
     └── index.js
     └── toast.vue

toast.vue выглядит следующим образом: простой файл vue

<template>
  <div class="toast">{{msg}}</div>
</template>
<script>
export default {
  name: "Toast",
  data() {
    return {
      msg: ""
    };
  }
};
</script>
<style scoped>
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: fit-content;
  height: 44px;
  background-color: rgba(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  color: #fff;
  border-radius: 5px;
}
</style>

Код index.js выглядит следующим образом:


import Toast from './components/Toast.vue'

Toast.install = (Vue) => {
  Vue.prototype.$toast = (msg, duration) => {   //添加一个实例方法 这样全局的实例都可以调用$toast方法了 msg、duration是调用$toast时传入的两个参数
    if (!msg) {
      return;
    }
    duration = duration || 1500;  //如果不传toast持续时间则默认使用此时间
    const constroct = Vue.extend(Toast)  //构造器
    const instance = new constroct();   //创建实例
    instance.msg = msg || '';           //将$toast(msg,duration)中的msg传入组件的data中
    const tpl = instance.$mount().$el   //vue实例未挂载时可这样拿到它的dom 后续可对它的dom进行操作

    document.querySelector('body').appendChild(tpl);
    setTimeout(() => {
      document.querySelector('body').removeChild(tpl)
    }, duration);
  }
}

export default Toast;

Упаковка компонентов

Скомпилируйте и упакуйте компоненты, используйте здесь webpack и создайте новый файл webpack.config.js в каталоге со следующей конфигурацией:

// 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: "toast.js", // 打包后输出文件的文件设置为btn.js
    libraryTarget: 'commonjs2' // 这个选项会尝试把库暴露给前使用的模块定义系统，这使其和CommonJS、AMD兼容或者暴露为全局变量
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
        test: /\.js$/,
        exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()   //这个插件是webpack打包.vue文件必须使用的 它的作用是将你定义的其他规则复制并运用到.vue文件里相应的块  如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。
  ]
}

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

{
  "name": "toast-component",
  "version": "1.0.0",
  "description": "",
  "main": "dist/toast.js",
  "scripts": {
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.2.2",
    "style-loader": "^1.2.1",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

Каталог проекта выглядит следующим образом

Установите соответствующие зависимости

npm i

Скомпилируйте и сгенерируйте файл пакета

npm run build

Видно, что упакованный файл сгенерирован

Тест, чтобы убедиться, что компоненты в норме

npm pack

Вы можете увидеть в каталоге, что сгенерирован сжатый пакет .tgz
Как обнаружить этот пакет? Мы можем создать новый проект vue для проверки.
Здесь, для удобства использования vue-cli для создания нового проекта test-toast, поместите только что сгенерированный сжатый пакет по пути каталога test-toast:

npm i toast-component-1.0.0.tgz

Внедрить и зарегистрировать этот компонент глобально

//main.js

import Vue from 'vue'
import App from './App.vue'

import Toast from 'toast-component'

Vue.config.productionTip = false
//全局注册
Vue.use(Toast)

new Vue({
  render: h => h(App),
}).$mount('#app')

использовать в проекте

//App.vue

<template>
  <div id="app">
    <div @click="showToast">点我出toast</div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},

  methods: {
    showToast() {
      this.$toast("hello world", 2000);
    }
  }
};
</script>

Запустите и нажмите кнопку, тост может выглядеть следующим образом, вы можете настроить продолжительность, msg

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

выпускать

Запустите командную строку в проекте компонента:

npm publish

Опубликовать в нпм. Чтобы войти, вы можете запустить:

npm login

Войдите снова. Эффект успешной публикации: Вы можете увидеть компонент на платформе npm

прикрепил

Адрес проекта компонента
Адрес проекта эффекта тестового компонента

Суммировать

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

Если эта статья была вам полезна, ставьте лайк! Ваши лайки и поддержка могут побудить авторов продолжать выпускать хорошие работы! Давайте быстро расти вместе~

Категории