踩坑札记之 npm 包发布

重点阐述 npm 包发布前后所踩坑,首先科普如何发布 npm 包。

发布流程

注册账号

开启终端输入:

npm adduser

根据提示输入 username、password、email 即刻注册成功,已注册用户请忽略上述步骤。登录请直接:

npm login

初始化包

新建一文件夹如 bridge,而后:

cd bridge
npm init

依提示完成初始化并完善目录:

.eslintrc、.gitignore、package.json、node_modules 不必过多解释,各位前端大大知晓。 src内为未经 Babel 转码的源代码,转码后置于 bridge 根目录,Babel 通过 .babelrc配置。至于 README.md,共享包说明书必不可少。

发布包

首先设置版本号,规则请参考 Semver,而后:

npm publish

理想情况下,包已成功发布至 npm,下述为非理想情况:

npm ERR! you do not have permission to publish XXX. Are you logged in as the correct user?

检查 npm name 是否被占用,若被占用请更改后重新发布。

npm ERR! forbidden cannot modify pre-existing version: 1.0.9: XXX

当前版本已发布,请更新版本号。

npm ERR! no_perms Private mode enable, only admin can publish this module: XXX

为加速 npm 部分同学利用淘宝镜像代理,请恢复原配置:

npm config set registry=http://registry.npmjs.org

步入正题

踩坑札记

https

若 npm 包中 method 含协议类型为 http请求(可跨域请求),但调用服务协议类型为 https,将报错:

[blocked] The page at https://XXXwas not allowed to display insecure content from http://XXX

请将接口服务升级 https,url 书写方案:

  • https://XXX:http 服务请求 https 接口 无报错;https 服务请求 https 接口 无报错
  • //XXX:请求协议类型随服务协议类型 自动转化

环境变量

若 npm 包中 method 执行需区分服务环境,通过 process.env.NODE_ENV获取 环境变量是否准确(node npm 包无上述准确性问题)?即便准确,命名规范也 未统一,如生产环境可由 prod、production 等指代。可考虑传参 约定的环境变量。

转码

转码即将 ES6、ES7 转 ES5,先附赠 Babel 转码教程,再科普忽视转码的危害:

另外,含未转码片段的 vendor.js(通常将所依赖 node_modules 模块打包至 vendor.js)若先于 app.js执行将直接导致较低版本浏览器 白屏

  • 未转码 node 包引用于 低版本 node 服务抛异常。

若服务器所安装 node 版本较低,引用未转码包将导致接口 抛异常。更糟糕的是若被页面加载前置中间件依赖,直接引发 白屏

此刻或许有同学考虑植入 babel-polyfill...


作者:呆恋小喵

我的后花园:https://sunmengyuan.github.io...

我的 github:https://github.com/sunmengyuan

原文链接:https://sunmengyuan.github.io...

原文链接:segmentfault.com

上一篇:vuex常用实战代码(同步+异步)
下一篇:JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式!

相关推荐

  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 预计今年发布的Vue3.0到底有什么不一样的地方?

    w949(https://img.javascriptcn.com/c5fbaf3b28e27a94b634df709b9d430d "w949") 还有几个月距离vue2的首次发布就满3年了,而v...

    2 年前
  • 项目中npm依赖问题

    最近开发遇到一个npm依赖导致的问题,报错如下。 sloterror(https://img.javascriptcn.com/804ed4a03d02191762c1f48473ba1711 "sl...

    2 年前
  • 革命性小程序框架 Remax 发布 2.0

    经过一段时间的开发,我们很高兴地向大家介绍支持 Web 应用构建的 Remax 2.0。 支持 Web 应用构建 得益于 Remax One 的设计,现在基于 Remax One 构建的应用可以编译到...

    2 个月前
  • 随记-npm

    npm npm是包管理器,方便开发人员分享,复用代码 用于搜索js模块/包的网站 npm服务器可下载或上传安装包或命令行程序 npm仓库存储安装包/安装模块 npm 安装 npm依赖于node,...

    4 个月前
  • 阿里云携手优锘发布智慧园区可视化产品

    2019年3月21日,2019阿里云峰会在北京国家会议中心如期举行。峰会上,阿里云与优锘科技联合发布了智慧园区可视化产品。 本次峰会中,围绕“十年再出发”的主题,阿里云首次进行全面战略解读,并重磅发...

    1 年前
  • 针对前端开发可重用组件并发布到NPM

    翻译:疯狂的技术宅 原文:https://www.smashingmagazine....(https://www.smashingmagazine.com/2018/07/reusablecom...

    1 年前
  • 重磅!首个多端 UI 组件库 - Taro UI 发布!

    (前言 "前言")前言(前言) Taro(/go/?target=https%3A%2F%2Fgithub.com%2FNervJS%2Ftaro) 是由京东·凹凸实验室倾力打造的多端开发解决...

    2 年前
  • 重磅!尤雨溪发布Vue 3.0开发路线

    作者|尤雨溪译者|无明编辑|覃云 在上周的 Vue.js 伦敦大会上,尤雨溪简要介绍了 Vue 下一个主要版本要发布的内容,9 月 30 日,尤雨溪在 medium 个人博客上发布了 Vue 3.0...

    2 年前
  • 重磅!Vue CLI 3.0正式发布,带来多项重大更新

    (https://img.javascriptcn.com/ee6ae9abde891464e97eb399dd82638b)编译|覃云近日,Vue 的作者尤雨溪在 Medium 上宣布正式发布 Vu...

    2 年前

官方社区

扫码加入 JavaScript 社区