专栏首页林小帅的专栏npm publish package 开发错误集合
原创

npm publish package 开发错误集合

这是【npm publish package】的最后一篇文章,总结了开发时需要注意的要点还有目前我自己遇到的错误集合。

没有长篇大论,全是解决问题的关键点,便于快速找到问题点以及解决方案。

01 - npm link

前提是需要另一个项目来配合使用,link 可以完全模拟 install 完成后的情况。

PROJECT

├─ cat-web-storage (需要发布的项目)

└─ testModules (用于测试的项目)

cd PROJECT\cat-web-storage
npm link

这一步是在 NodeJs\node_global\node_modules 中生成 link package。

cd PROJECT\testModules
npm link cat-web-storage

这一步是将 PROJECT\cat-web-storage link 到 当前项目中。

link 和 指向关系

最终的结果就是 testModules 的 node_modules 直接指向 cat-web-storage 源码。这样就能直接减少频繁的 build 需要开发的项目,省时省力!!!

02 - package.js

想要能够直接进行 console.log、debugger或者断点调试就需要修改 cat-web-storage 项目中的 package.js 配置。

开发阶段:

修改配置如下,main、module 入口应该都是指向源码文件而非 build 后的代码文件。

{
  "main": "src/index.ts",
  "module": "src/index.ts"
}

确认需要发布:

这里就注意需要修改成 build 后的文件作为入口,切记!切记!切记!!!

{
  "main": "dist/web-storage.common.js",
  "module": "dist/web-storage.esm.js"
}

03 - resolve.symlinks

首先需要配置 resolve.symlinks ,配置以后 webpack 会将 cat-web-storage 源码进行编译。

chainWebpack: config => {
  config.resolve.symlinks(false);
}

以上就是在开发阶段需要修改的地方。重要!!!

04 - 找不到依赖项错误

如果出现以下错误,请先检查 testModules 是否已经正确 link 了 cat-web-storage 的源码!

This dependency was not found:
* cat-web-storage in ./src/main.ts
To install it, you can run: npm install --save cat-web-storage
Type checking and linting in progress...

05 - 未找到ESLint配置错误

如果出现以下错误,请先检查是否已经将 resolve.symlinks 配置到 testModules 项目中!

ERROR  Failed to compile with 1 errors
  Module build failed (from ./node_modules/eslint-loader/index.js):
  Error: No ESLint configuration found in PROJECT\cat-web-storage\dist.

06 - 不存在属性警告错误

如果使用的是 TypeScript 来开发就需要注意一下,testModules 启动正常,但是控制台提示警告错误,但页面运行正常

常见如下:

Property '$localStorage' does not exist on type 'WebStorage'.

this.$localStorage.set('number', 10086); // 情况一
     ^
vm.$localStorage.set('number', 10086); // 情况二
   ^
window.$localStorage.set('number', 10086); // 情况三
       ^

此警告错误是因为缺少类型描述文件,即 *.d.ts 文件。在 testModules 项目中 src 下新建任意 *.d.ts 文件。

添加如下信息:

// 导入你的项目
import {
  LocalStorage,
  SessionStorage,
  CookieStorage
} from 'cat-web-storage';
// 将导出的接口描述类型,以接口的方式声明至 vue type 描述文件中
// 'vue/types/vue' vue 类型描述文件路径
declare module 'vue/types/vue' {
  interface Vue {
    $localStorage: LocalStorage
    $sessionStorage: SessionStorage
    $cookieStorage: CookieStorag
  }
}

添加完成后重启项目即可解决。

最后需要发布 publish package 的时候别忘记了将 npm 源切换至 npmjs 不然登录的时候会报错噢 。

阿里云的 npm 镜像 cnpm 会每10分钟进行一次同步。

最后

我在尝试编写一个 npm publish package 的时候还是较为顺利的。开始的时候也是看了点资料闷头就写。主要有两个地方消耗的时间是比较多的。

使用 rollup + TypeScript 的最大的问题就是网上的资料较少且较为古老,部分所使用的包已经不再维护了,后来是自己是按照同名包寻找 rollup 的 TypeScript 版本才最终确定哪些包是可以使用的。

未找到 ESLint 配置错误,在这里也是花费了一些时间,主要是第一次遇到的时候报出了 ESLint 的错误,先入为主看着错误的字面意思我就是以为没有引入 ESLint 包,后来又引入了 ESLint 以及配置了规则,但最终结果还是启动失败的。后来我就想着,我两个项目(发布项目和测试项目)都是用的 TypeScript 为什么会和 ESLint 有关系?逐换了好几茬关键字搜索,终于找到有和我类似问题的文章,其中就提到 resolve.symlinks 这个关键信息。

最后的最后那就祝各位小伙伴

代码力Max!

生产力爆棚!

朝九晚五不加班!

相关文章

版权声明:

本文版权属于作者 林小帅,未经授权不得转载及二次修改。

转载或合作请在后台留言及联系方式。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • npm publish package 测试流程

    上一篇 npm publish package 发布流程 中说了开发的过程,但是对于测试和调试部分并没有过多的去讲述这些事情。如果一次都说完的话文章就太长了,而...

    林小帅
  • 命令行环境开发Android?

    因为,当所有 Android Studio 的所需环境以及SDK安装完成后大概占用6~8Gb磁盘空间…

    林小帅
  • npm publish package 发布流程

    之前在和小伙伴做一些项目学习的时候经常会写一些重复的代码,然后复制粘贴到下一个项目中使用,比如之前写了 localStorage、sessionStorage等...

    林小帅
  • Mac电脑使用:通过Mac终端安装淘宝镜像报错,提示无权限的解决方法

    最近在开发过程中,遇到了给Mac电脑装淘宝镜像遇到的一个无权限问题,也就是Mac电脑的终端默认情况下打开的是普通用户模式,安装淘宝镜像需要打开管理员模式才行,所...

    三掌柜
  • 怎么使用 Git 和 Github 向开源项目提交 Pull Request

    渣渣橘又跟我提了一下毒鸡汤,看了一下之前学的 python 脚本还能用,然后在 Github 上看到了一个爬虫集合的项目,收集各种爬虫

    沈唁
  • RabbitMQ实战:界面管理和监控

    上一篇总结了可能出现的异常场景,并对RabbitMQ提供的可用性保证进行了分析,在出现服务器宕机后,仍然可以正常服务。另外,需要尽快恢复异常的服务器,重新加入集...

    情情说
  • Cloud_Native是什么?

    Cloud_Native概念最近比较火,因此研究下到底讲的是什么含义。 Cloud_Native从概念上讲核心说的是传统的应用部署在数据中心上的架构不适合云化的...

    大数据和云计算技术
  • 前端领域2017年有哪些变化,2018年又有怎样的期待?

    以下为我在知乎问题「2017年前端有什么样变化?即将来临的2018有什么样的期待?」下的回答,稍作整理分享给大家。如有遗漏欢迎在评论中指出。原文如下: 在即将过...

    企鹅号小编
  • 如何将自定义XML视图注入SAP Fiori Elements应用

    Recently I need to put my own XML view into the application generated automatica...

    Jerry Wang
  • Confluence 6 修改空间名字和标识 原

    https://www.cwiki.us/display/CONF6ZH/Configure+the+Sidebar

    HoneyMoose

扫码关注云+社区

领取腾讯云代金券