VUE（一）组件制作成npm包，上传和使用

目录

• 利用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

1. 以管理员（admin）身份登录后，点击 create repository

   

2. 进入创建页面

   

和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下载。

1. 创建proxy类型的repository

   

2. 创建hosted类型的repository

   

   • Deployment policy选择 Allow redeploy，允许相同名称、版本号的包重复上传

3. 创建group类型的repository

   

   • 将我们创建的proxy和hosted的仓库都追加进来

配置开发环境的registry

1. 执行如下命令，设置registry

   npm config set registry=http://localhost:8085/repository/falcon-npm-group/
   
   

   • 其中 http://localhost:8085/repository/falcon-npm-group/是我们创建的group仓库的地址

2. 执行如下命令，查看是否从自己的repository中下载包

   $ npm --loglevel info install jquery
   npm info it worked if it ends with ok
   npm info using [email protected]
   npm info using [email protected]
   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 [email protected]~preinstall: [email protected]
   npm timing action:preinstall Completed in 3ms
   npm info linkStuff [email protected]
   npm timing action:build Completed in 3ms
   npm info lifecycle [email protected]~install: [email protected]
   npm timing action:install Completed in 1ms
   npm info lifecycle [email protected]~postinstall: [email protected]
   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 [email protected] No description
   npm WARN [email protected] No repository field.
   
   + [email protected]
   
   

   • 可以看到从falcon-npm-group仓库下载了jquery包

编写自定义vue组件

创建项目

1. 利用脚手架创建工程

   
   $ vue init webpack-simple vue-npm-demo
   
   ? Project name vue-npm-demo
   ? Project description A Vue.js project
   ? Author chengaofeng 
   ? License MIT
   ? Use sass? Yes
   
      vue-cli · Generated "vue-npm-demo".
   
      To get started:
      
        cd vue-npm-demo
        npm install
        npm run dev
   
   

2. 按照提示，依次执行 cd vue-npm-demo、npm install、 npm run dev命令

3. 启动后会用默认浏览器打开项目首页

   

新建vue组件

1. 将工程导入到自己的IDE中

2. 在src下创建components目录存放我们自己的vue组件

3. 在components下创建 first-vue-demo.vue文件

4. 在项目根目录下创建webpack打包的入口文件index.js（在webpack.config.js中会配置使用这个文件），文件内容如下（追加导出自定义组件的逻辑）

   
   import vuedemo from './src/components/first-vue-demo.vue'
   
   export default vuedemo
   
   

5. 最终目录结构如下

   

6. 编辑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

7. 编辑package.json文件，追加main属性（是其他工程导入此模块时的入口）

   "main": "./dist/vue-nmp-demo.js",
   
   

8. 编辑index.html，引入我们导出的js文件

   

9. 将我们的组件加入到App.vue中，这样可以直接对我们的组件进行测试

   

   追加了图中红框内的三行代码

编译运行vue组件工程

1. 执行如下命令开始编译工程

   $ npm run build 
   
   > [email protected] 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
   
   

2. 查看编译结果

   $ ls dist/
   vue-nmp-demo.js		vue-nmp-demo.js.map
   
   

3. 重新启动工程

   $ npm run dev
   
   

   

将vue组件打包上传到nexus

1. 修改package.json 将private属性修改成false

   "private": false,
   
   

2. 在nexus上创建角色【nx-deploy】，并赋予发布npm的权限

   

3. 创建用户deployer，并赋予角色【nx-deploy】

   

4. 激活npm realm
   

5. 在工程目录下创建.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
   
   

6. 执行npm login命令，向nexus认证

   $ npm login --registry='http://localhost:8085/repository/falcon-npm-hosted/'
   Username: deployer
   Password: 
   Email: (this IS public) [email protected]
   Logged in as deployer on http://localhost:8085/repository/falcon-npm-hosted/.
   
   

   • 注意此处用的registry是hosted类型的repository
   • 按照提示输入 用户名（deployer）、密码、邮箱信息

7. 上传npm包

   $ npm publish --registry='http://localhost:8085/repository/falcon-npm-hosted/'
   npm notice 
   npm notice   [email protected]
   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 
   + [email protected]
   
   

   • 可以把registry配置到package.json文件的publishConfig属性中

   • 在nexus中查看

     

在新的工程中使用自定义的组件包

1. 新建一个vue脚手架工程，依赖我们自定义的组件

   $ vue init webpack-simple use-selfdefine-vue
   
   

2. 修改package.json 文件，在依赖中加入我们自定义的组件包

   

3. 在App.vue中引入我们的组件

   

4. 执行命令 npm install、 npm run dev启动新工程

   

5. 也可以动态引入自定义的组件

   修改App.vue，动态引入我们自定义的组件

   

遇到问题

1. 执行 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/'
     

2. 执行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/'