快捷導航

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

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

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

初始化項目

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

根目錄初始化git

git init .

建立開源協(xié)議

給項目根目錄手動創(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.

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

功能開發(fā)中，建立實時本地軟鏈接進行測試

npm link

會在全局包生成個臨時的軟鏈接

有了軟鏈接后，在你測試的項目里與軟鏈接達成連接

npm link 包名

然后就是在你測試的項目里import

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

使用試試看

測試完畢沒問題記得解除你測試項目里的軟鏈接連接

npm unlink 包名

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

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

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

項目根目錄創(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‘，否則會為默認值 'self‘，無法在 nodejs 環(huán)境中使用。
  }
}

package.json 文件配置scripts：