目錄
- 利用nexus搭建npm repository
- 配置開發環境的registry為我們自己的私有倉庫
- 編寫自定義vue組件
- 將自定義組件作為npm包上傳到nexus的repository中
- 在vue工程中使用使用自己制作的vue組件
nexus搭建npm repository
nexus啟動（docker形式）
docker run -d -p 8085:8081 --name nexus -v `pwd`/data:/nexus-data sonatype/nexus3:3.23.0
-
對外暴露的端口號是8085
-
nexus數據存放在啟動目錄下的 data目錄中
-
利用的nexus版本號是3.23.0
-
啟動完成后訪問 http://{ip}:8085,進入登錄頁面，首次登錄默認管理員用戶名是admin，密碼在data下的admin.password文件中
-
首次進入會詢問，是否允許匿名訪問，選擇允許。這樣，客戶端在不進行認證時也可以從nexus中拉取相應的npm包,也可后期設置
配置npm repository
-
以管理員（admin）身份登錄后，點擊 create repository
-
進入創建頁面
和npm包相關的repository有三個group、proxy、hosted
- group： npm倉庫組，本身不存儲npm包，而是把多個npm repository組合起來，對外提供服務
- hosted： 本地npm倉庫，我們自定義的組件需要上傳到這種類型的倉庫中
- proxy：代理npm倉庫，內部設置一個公共的倉庫地址，當我們從nexus的npm倉庫中下載時，如果倉庫中沒有對應的包，nexus會自動通過proxy從公共倉庫中下載，並緩存到nexus中，再次下載相同的包時就不需要聯網下載，直接從nexus的緩存中獲取。
一般情況下，我們會創建一個proxy的repository，內部代理到https://registry.npm.taobao.org；再根據業務划分，創建多個hosted的repository；之后創建一個group類型的repository，將hosted和proxy的倉庫都加到這個group中，之后在開發環境中通過 npm config set registry={grop repository url}，這樣開發者即可從hosted下載自定義的npm包，如果是公共包，則自動通過proxy下載。
-
創建proxy類型的repository
-
創建hosted類型的repository
- Deployment policy選擇 Allow redeploy，允許相同名稱、版本號的包重復上傳
-
創建group類型的repository
- 將我們創建的proxy和hosted的倉庫都追加進來
配置開發環境的registry
-
執行如下命令，設置registry
npm config set registry=http://localhost:8085/repository/falcon-npm-group/- 其中
http://localhost:8085/repository/falcon-npm-group/是我們創建的group倉庫的地址
- 其中
-
執行如下命令，查看是否從自己的repository中下載包
$ npm --loglevel info install jquery npm info it worked if it ends with ok npm info using npm@6.14.4 npm info using node@v12.16.2 npm http fetch GET 200 http://localhost:8085/repository/falcon-npm-group/jquery 1428ms npm timing stage:loadCurrentTree Completed in 1552ms npm timing stage:loadIdealTree:cloneCurrentTree Completed in 0ms npm timing stage:loadIdealTree:loadShrinkwrap Completed in 0ms npm timing stage:loadIdealTree:loadAllDepsIntoIdealTree Completed in 7ms npm timing stage:loadIdealTree Completed in 13ms npm timing stage:generateActionsToTake Completed in 8ms npm http fetch POST 400 http://localhost:8085/repository/falcon-npm-group/-/npm/v1/security/audits/quick 163ms npm http fetch GET 200 http://localhost:8085/repository/falcon-npm-group/jquery/-/jquery-3.5.1.tgz 1337ms npm timing action:extract Completed in 1442ms npm timing action:finalize Completed in 11ms npm timing action:refresh-package-json Completed in 16ms npm info lifecycle jquery@3.5.1~preinstall: jquery@3.5.1 npm timing action:preinstall Completed in 3ms npm info linkStuff jquery@3.5.1 npm timing action:build Completed in 3ms npm info lifecycle jquery@3.5.1~install: jquery@3.5.1 npm timing action:install Completed in 1ms npm info lifecycle jquery@3.5.1~postinstall: jquery@3.5.1 npm timing action:postinstall Completed in 1ms npm timing stage:executeActions Completed in 1513ms npm timing stage:rollbackFailedOptional Completed in 1ms npm timing stage:runTopLevelLifecycles Completed in 3092ms npm info lifecycle undefined~preshrinkwrap: undefined npm info lifecycle undefined~shrinkwrap: undefined npm notice created a lockfile as package-lock.json. You should commit this file. npm info lifecycle undefined~postshrinkwrap: undefined npm WARN registry@1.0.0 No description npm WARN registry@1.0.0 No repository field. + jquery@3.5.1- 可以看到從falcon-npm-group倉庫下載了jquery包
編寫自定義vue組件
創建項目
-
利用腳手架創建工程
$ vue init webpack-simple vue-npm-demo ? Project name vue-npm-demo ? Project description A Vue.js project ? Author chengaofeng <chengaofengcool@163.com> ? License MIT ? Use sass? Yes vue-cli · Generated "vue-npm-demo". To get started: cd vue-npm-demo npm install npm run dev -
按照提示，依次執行
cd vue-npm-demo、npm install、 npm run dev命令 -
啟動后會用默認瀏覽器打開項目首頁
新建vue組件
-
將工程導入到自己的IDE中
-
在src下創建components目錄存放我們自己的vue組件
-
在components下創建 first-vue-demo.vue文件
<template> <div id="app"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'first-vue-demo', data () { return { msg: '測試 vue npm 打包' } } } </script> <style lang="scss"> #app { text-align: center; color: #15dc1f; margin-top: 100px; } </style> -
在項目根目錄下創建webpack打包的入口文件index.js（在webpack.config.js中會配置使用這個文件），文件內容如下（追加導出自定義組件的邏輯）
import vuedemo from './src/components/first-vue-demo.vue' export default vuedemo -
最終目錄結構如下
-
編輯webpack.config.js,指定組件打包的相關信息
修改內容是圖中的紅框中的部分,內容如下
const NODE_ENV = process.env.NODE_ENV module.exports = { entry: NODE_ENV == 'development' ? './src/main.js' : './index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'vue-nmp-demo.js', library: 'vue-nmp-demo', libraryTarget: 'umd', umdNamedDefine: true },- 在開發環境時，用./src/main.js作為入口；在生產環境用./index.js
- 指定生成的文件名vue-nmp-demo.js
- 模塊名稱是vue-nmp-demo
-
編輯package.json文件，追加main屬性（是其他工程導入此模塊時的入口）
"main": "./dist/vue-nmp-demo.js", -
編輯index.html，引入我們導出的js文件
-
將我們的組件加入到App.vue中，這樣可以直接對我們的組件進行測試
追加了圖中紅框內的三行代碼
編譯運行vue組件工程
-
執行如下命令開始編譯工程
$ npm run build > vue-npm-demo@1.0.0 build /Users/chengaofeng/workspace/vue/npm/vue-npm-demo > cross-env NODE_ENV=production webpack --progress --hide-modules Hash: 2aa47e6d35b583e59ab8 Version: webpack 3.12.0 Time: 7450ms Asset Size Chunks Chunk Names vue-nmp-demo.js 5.71 kB 0 [emitted] main vue-nmp-demo.js.map 49.3 kB 0 [emitted] main -
查看編譯結果
$ ls dist/ vue-nmp-demo.js vue-nmp-demo.js.map -
重新啟動工程
$ npm run dev
將vue組件打包上傳到nexus
-
修改package.json 將private屬性修改成false
"private": false, -
在nexus上創建角色【nx-deploy】，並賦予發布npm的權限
-
創建用戶deployer，並賦予角色【nx-deploy】
-
激活npm realm
-
在工程目錄下創建.npmignore文件，將不需要上傳的文件排除
.DS_Store node_modules/ build/ config/ static/ .babelrc .editorconfig .gitignore .npmignore .postcssrc.js index.html package-lock.json npm-debug.log* yarn-debug.log* yarn-error.log* src/ #Editordirectoriesandfiles .idea .vscode *.suo *.ntvs* *.njsproj *.sln -
執行npm login命令，向nexus認證
$ npm login --registry='http://localhost:8085/repository/falcon-npm-hosted/' Username: deployer Password: Email: (this IS public) deployer@dev.com Logged in as deployer on http://localhost:8085/repository/falcon-npm-hosted/.- 注意此處用的registry是hosted類型的repository
- 按照提示輸入 用戶名（deployer）、密碼、郵箱信息
-
上傳npm包
$ npm publish --registry='http://localhost:8085/repository/falcon-npm-hosted/' npm notice npm notice 📦 vue-npm-demo@1.0.0 npm notice === Tarball Contents === npm notice 82B index.js npm notice 5.7kB dist/vue-nmp-demo.js npm notice 2.6kB webpack.config.js npm notice 946B package.json npm notice 49.3kB dist/vue-nmp-demo.js.map npm notice 327B README.md npm notice === Tarball Details === npm notice name: vue-npm-demo npm notice version: 1.0.0 npm notice package size: 14.5 kB npm notice unpacked size: 59.0 kB npm notice shasum: d9823effabae65454e8d3f20ce93fb634a0d644b npm notice integrity: sha512-YANnHr+V3h83N[...]6K8/KC5srdW1Q== npm notice total files: 6 npm notice + vue-npm-demo@1.0.0-
可以把registry配置到package.json文件的publishConfig屬性中
-
在nexus中查看
-
在新的工程中使用自定義的組件包
-
新建一個vue腳手架工程，依賴我們自定義的組件
$ vue init webpack-simple use-selfdefine-vue -
修改package.json 文件，在依賴中加入我們自定義的組件包
-
在App.vue中引入我們的組件
-
執行命令
npm install、 npm run dev啟動新工程
-
也可以動態引入自定義的組件
修改App.vue，動態引入我們自定義的組件
遇到問題
-
執行
npm install命令時出現如下錯誤npm ERR! code E401 npm ERR! Unable to authenticate, need: BASIC realm="Sonatype Nexus Repository Manager" npm ERR! A complete log of this run can be found in: npm ERR! /Users/chengaofeng/.npm/_logs/2020-05-07T12_50_24_551Z-debug.log-
需要在nexus的realms中把
npm Bearer Token Realm激活 -
另外還需要對group的repository進行認證
$ npm login --registry='http://localhost:8085/repository/falcon-npm-group/'
-
-
執行
npm publish命令出現如下錯誤npm ERR! code E401 npm ERR! Unable to authenticate, need: BASIC realm="Sonatype Nexus Repository Manager"-
執行npm publish時需要通過--registry指定上傳的倉庫是hosted類型的repository
-
執行publish前要先對hosted的repository進行認證
$ npm login --registry='http://localhost:8085/repository/falcon-npm-hosted/'
-