手摸手教你在Nexus上传npm包并使用

2022-11-05 本文已影响0人 SA_Arthur

Nexus3
Vue2
Vue-cli3

Nexus搭建npm仓库

npm包建设

组件库创建

1、在项目中添加组件库文件夹，在根目录下新建一个plugins文件夹，用来放组件。
这里创建plugins文件夹，与src平级。

2、添加配置文件，项目根目录下面添加vue.config.js文件，主要用于配置webpack打包。
这里使用的是代码打包压缩后上传，这样后期使用的是压缩的js文件。

const path = require('path')
module.exports = {
  // 修改 pages 入口
  pages: {
    index: {
      entry: 'src/main.js', // 入口
      template: 'public/index.html', // 模板
      filename: 'index.html' // 输出文件
    }
  },
  // 扩展 webpack 配置
  chainWebpack: config => {
    // @ 默认指向 src 目录
    // 新增一个 ~ 指向 plugins
    config.resolve.alias
      .set('~', path.resolve('plugins'))

    // 把 plugins 加入编译，因为新增的文件默认是不被 webpack 处理的
    config.module
      .rule('js')
      .include.add(/plugins/).end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}

3、编写组件
这里先创建components文件夹来存放组件，接着创建index.js统一导出所有组件以及暴露install方法，如果需要单独暴露组件，则在每个组件的文件夹下建立index.js，单独暴露及安装。
组件代码略，以下为统一暴露组件的index.js：

//组件
import pagination from "./components/pagination/index.vue"
import table from "./components/table/index.vue"

//所有组件列表
const components = [pagination, table]


//定义install方法，Vue作为参数
const install = Vue => {
  //判断是否安装，安装过就不用继续执行
  if (install.installed) return;
  install.installed = true;
  //遍历注册所有组件
  components.map(component => Vue.component(component.name, component));
};

//检测到Vue再执行
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  //所有组件，必须具有install方法才能使用Vue.use()
  ...components
};

4、在本地先测试封装是否正确，组件能否展示，此步骤略。
5、打包
package.json

{
  "name": "sn-front-web-tools", //包的名称，不能重复
  "version": "0.1.0", //初始版本号
  "main": "dist/sn-front-web-tools.umd.min.js", //指定包的入口文件
  "description": "SN前端web组件", //描述信息
  "keywords": [ //关键字，供npm上模糊搜索到包
    "pagination",
    "table"
  ],
  "license": "MIT", //包遵循的开源许可协议 默认ISC
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name sn-front-web-tools -dest lib plugins/index.js",
    "lint": "vue-cli-service lint"
  }
}

package.json详细解说

.gitignore添加

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?


src/
plugins/
public/
vue.config.js
babel.config.js
*.map
*.html

这个步骤是把包的一些测试文件过滤掉，最终打包只留下直接封装的文件，即plugins中封装的暴露组件。

6、在终端执行npm run lib，结果如下

执行后的文件目录

发布到nexus

1、修改npm registry

npm config set registry=http://xxxx/nexus/content/groups/npm-internal/

2、修改.npmrc文件
直接在命令行输入npm config edit即可打开。
添加以下：

email=you@example.com 
always-auth=true 
_auth=YWRtaW46YWRtaW4xMjM=

注意，上面_auth为测试值，实际上是用户名密码的Base64位证书

如何获得_auth值？（windows环境）
在任意目录下创建一个in.txt文件，里面直接写nexus访问的用户名：密码。
如：admin:admin123
不要有空行或空格等其他信息。
在in.txt目录下命令行执行
certutil /encode in.txt out.txt
执行后会在当前目录生成out.txt文件，内容是
—–BEGIN CERTIFICATE—–
YWRtaW46YWRtaW4xMjM=
—–END CERTIFICATE—–
第二行即为编码证书，把这串证书信息及你的邮箱信息添加到 .npmrc中

3、测试发布包

npm publish --registry http://xxxx/nexus/content/groups/npm-internal/

nexus上的包

没有异常则发布成功。

npm包使用

注意：本次使用的npm包需要在安装element-ui前提下使用！！

1、安装

npm i sn-front-web-tools --save

2、使用

main.js

本次包已用全局使用的方式，只需要在main.js中添加即可。
在项目中直接使用组件的name即可。

3、更新
命令行输入npm install --save sn-front-web-tools@latest