面试被问前端项目难点？可以这样回答

用户291054748496
260 阅读4分钟

最近遇到一个需求，需要通过低代码生成组件，然后把组件发布到私仓，在其他项目可以通过npm导入使用，低代码使用的是华为的TinyEngine平台，具体教程可以参考tingengine的官方教程：TinyEngine 低代码引擎 —— 使能开发者定制低代码平台，这里主要介绍一个通用的方法，并不局限于通过低代码生成组件来进行发布，也可以发布其他框架写的组件。 我npm私仓的搭建采用的是verdaccio

verdaccio搭建过程

verdaccio的安装

npm install -g verdaccio

verdaccio启动

verdaccio

接下来是创建用户以及发布过程

npm adduser --registry http://localhost:4873/  //创建用户
npm login --registry http://localhost:4873/      //登录   
npm unpublish [packageName] --registry http://localhost:4873 --force   //删除版本

第一种方式：本地编写的组件

如果是本地项目直接编写的组件，则直接打包后运行以下发布命令

npm publish --registry http://localhost:4873/    //发布命令

发布成功后可以直接访问http://localhost:4873/ 则可以看到发布成功的包

image.png

第二种方式：低代码平台生成的组件

如果是通过低代码平台发包则需要去创建token，去替换替换原npm上申请的token，用于发包，一般在config文件中配置。通过以下命令可以创建token

npm token create --registry=http://localhost:4873/

配置好token后，还需要替换 registry 为自己的私仓地址

image.png

接下来就可以在低代码平台上编写组件并且发布，发布成功后可以直接访问http://localhost:4873/ 则可以看到发布成功的包

在新项目中引入发布的包

首先需要将npm的镜像地址切换为私仓的地址，才能下载私仓的包

npm set registry http://localhost:4873/

进去包里面，可以看到下载方式，可以按照项目的下载方式自行选择

image.png 安装完成之后直接导入便能直接使用

image.png 低代码平台的效果图如下

image.png 在新项目中引入的效果如下

image.png 到这里便可以完整实现发布组件到私有 npm 仓库

通过CDN引入发布的包

如果需要通过CDN链接的方式，直接使用发布的包，那么则需要使用到unpkg，我采用的是搭建unpkg服务，通过unpkg服务来读取我们的私有库的包，unpkg是什么：unpkg 是一个前端常用的公共 CDN

首先是安装unpkg

从github上拉取源码

git clone https://github.com/mjackson/unpkg.git

安装依赖

npm i

在package.json的script添加start命令：

"scripts": {
    "build": "rollup -c",
    ...
    "watch": "rollup -c -w",
    "start":"set NODE_ENV=production&&node server.js"
  },

执行编译命令：

npm run build

启动服务：

npm run start

访问http://localhost:8080 测试是否有效

image.png 我们自己搭建的unpkg已经可以正常的使用了，但是目前我们私库的npm包还是不能访问，接下来就是添加私库支持了；

unpkg添加私库支持

根目录新建npmConfig.js来存放私库包的命名空间：

//存放私库包的命名空间
export const scopes = [
    '@opentiny-assets'
];
/****
 * 私库地址，代理端口会解析url的端口号
 * const privateNpmRegistryURLArr = privateNpmRegistryURL.split(":");
 * const privateNpmPort = privateNpmRegistryURLArr[privateNpmRegistryURLArr.length - 1]
 * 拉取一些npm的包会返回302的情况，unpkg暂时没有处理，会不会和本地的npm源有关？
 ***/
export const privateNpmRegistryURL = 'http://localhost:4873';

//互联网npm地址
export const publicNpmRegistryURL = 'http://registry.npmjs.org';

export default scopes;

接下来就是修改修改modules/utils/npm.js文件了，思路大概如下：

  • 私库地址为http，需要修改https为http；
  • 设置我们私库的端口；
  • 根据npmConfig.js中的scopes去匹配unpkg请求的包，如果是私库的包，就走内网的npm源，如果没有匹配到，就走互联网npm地址；

预览npm.js源码

修改npm.js完毕之后，执行npm run build重新生成server.js文件，然后启动服务：npm run start；

测试读取我们的私库包： 访问http://localhost:8080/browse/包名 即可看到刚刚发的包，例如我发布的包地址则为http://localhost:8080/browse/@opentiny-assets/tinyengine-block-naviblock-1024@1.0.1/

image.png 现在unpkg也搭建完毕，在新项目中则可以使用CDN链接来引入了，通过script标签引入，

<script src="http://localhost:8080/@opentiny-assets/tinyengine-block-naviblock-1024@1.0.1/"></script>

引入后就可以直接使用

这就是的完整流程，这个思路应用比较广泛，个人可使用，公司需要私有npm库的，也可以按照这个思路去配置

avatar
文章
阅读
粉丝