快捷導(dǎo)航

vue使用npm發(fā)布自己的公網(wǎng)包

更新時(shí)間：2023年08月17日 09:25:46 作者：美酒沒故事°

本文主要介紹了vue使用npm發(fā)布自己的公網(wǎng)包,通過創(chuàng)建一個(gè)簡單的npm包,本文詳細(xì)闡述了從創(chuàng)建到發(fā)布的整個(gè)過程,具有一定的參考價(jià)值,感興趣的可以了解一下

初始化項(xiàng)目

比如我，創(chuàng)建了code-transfor-text_vue項(xiàng)目

根目錄初始化git

git init .

建立開源協(xié)議

給項(xiàng)目根目錄手動(dòng)創(chuàng)建LICENSE文件文件，沒有后綴名

MIT License
Copyright (c) 2023 quanyi
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

項(xiàng)目基本搭建完畢，開始你的功能開發(fā)吧

功能開發(fā)中，建立實(shí)時(shí)本地軟鏈接進(jìn)行測(cè)試

npm link

會(huì)在全局包生成個(gè)臨時(shí)的軟鏈接

有了軟鏈接后，在你測(cè)試的項(xiàng)目里與軟鏈接達(dá)成連接

npm link 包名

然后就是在你測(cè)試的項(xiàng)目里import

import CodeTransforText from "code-transfor-text_vue"
Vue.use(CodeTransforText)

使用試試看

測(cè)試完畢沒問題記得解除你測(cè)試項(xiàng)目里的軟鏈接連接

npm unlink 包名

同時(shí)存在全局包的軟鏈接記得刪除：

一切準(zhǔn)備就緒，可以發(fā)布了

如果包比較大想要打包一下，使用該步驟

項(xiàng)目根目錄創(chuàng)建 webpack.config.js 文件，寫入：

const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'CodeTransforText', // 全局掛載包的引用名
    libraryTarget: 'umd', //通用模式：支持用戶通過es、common.js、AMD的方式引入npm包
    globalObject: 'this' // 為 webpack 4 新增屬性，需要指定 global 的值為 'this‘，否則會(huì)為默認(rèn)值 'self‘，無法在 nodejs 環(huán)境中使用。
  }
}

package.json 文件配置scripts：