专栏首页经年隔世将做好的前端组件制作成npm包发布

将做好的前端组件制作成npm包发布

将做好的前端组件制作成npm包发布

一、名字 animation-css

二、期间发布npm包npm publish时遇到几个报错

1.报错code E403

npm ERR! code E403
npm ERR! 403 Forbidden - PUT https://registry.npm.taobao.org/animation-css - [no_perms] Private mode enable, only admin can publish this module
npm ERR! A complete log of this run can be found in:
......

这个问题是我们使用了淘宝镜像的问题,使用的是淘宝源cnpm,登陆到的是cnpm,我们把它切换成npm就好了。

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

如果是这种报错:

npm ERR! code E403
npm ERR! 403 Forbidden - PUT http://registry.npmjs.org/animation-css - Package name too similar to existing packages
......

则表明是我们创建的这个npm包的名字跟官网上已有的包的名字太类似了,不被允许,所以我们需要给我们的npm包换一个名字。 起名字时到npm官网查下有没有名字已经被占用了,尽量给npm包起一个不会重复的名字,再次发布就可以了。

2.报错code E401

npm ERR! code E401
npm ERR! 401 Unauthorized - PUT http://registry.npmjs.org/animation-css - You must be logged in to publish packages.
npm ERR! A complete log of this run can be found in:
......

原因是Unauthorized未授权,我们登录一次就好了,执行 npm adduser,依次输入npm的账户密码还有Email。

输入成功登录之后,控制台会显示以下代码:

Logged in as 你的Username on https://registry.npmjs.org/.

如果 on 后面不是 https://registry.npmjs.org/ ,而是其他的镜像,比如我们大家常见的淘宝镜像:

Logged in as 你的Username on http://registry.npm.taobao.org/

那么,切换成npm:

npm config set registry https://registry.npmjs.org/

然后再执行 npm adduser 登录账户 、 npm publish 发布就行了。

三、构架规划

·使用git作代码版本管理 scss代码编译 使用weflow进行编译和压缩

npm安装指令

安装模块到项目目录下但不写入package.json;

$ npm install xxx

安装到项目目录并写入package.json的"dependencies"中;

$ npm install xxx –S

安装到项目目录并写入package.json的"devDependencies"中;

$ npm install xxx –D

全局安装

$ npm install xxx -g

安装特定版本

$ npm install xxx@1.0.0

npm i --save-dev animation-library

解决npm 更新指定模块不生效的办法

根本原因是:package.json里的模块配置没被更改,所以npm update *** 更新指定模块命令不生效,这种情况需要手动更改package.json配置里模块的版本号 当然也可以执行以下指令安装:

(1)安装"npm-check-updates"模块

$ npm install -g npm-check-updates

(2)安装后,检查可更新的模块

$ ncu 或 $ npm-check-updates

(3)更新package.json的依赖包到最新版本

$ ncu -u

- 检查包是否已经过时
 npm outdated
 - 更新node模块
 npm update 模块名
 npm update 模块名 @版本号 更新到指定版本
 npm update 模块名 @latest
 - 卸载node模块
 npm uninstall 模块名

SCSS插值语句

语法:
#{}

//编译前
$height:10px;
$name:height;
/*
 * @author:#{$name}
 */
.div-#{$name}{
  #{$name}: #{$height};
};

//编译后
/*
 * @author:height
 */
.div-height {
  height: 10px; }


实用例子:
$nameSpace: 'hvr' !default;

sass命令行编译 进入scss目录再运行代码

sass --style animation-library.scss:…/css/animation-library.css

1.创建一个文件夹,名字随意 2.创建一个package.json文件,可以在创建的这个文件夹中用npm init来创建package.json文件 npm init需要输入一些项目配置,比如项目名字这些 3.创建index.js入口文件

-----创建初步完成 关联npm账户 在当前文件目录执行命令 npm login 登录完成后,可以执行 npm publish 发布到npm官网上。https://www.npmjs.com/ 查看自己发布的npm组件


END

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML里的数据存储分析

    cookie是什么?cookie就是一段文本,它存储在客户端(通常来说是浏览器),目前为各大主流浏览器存储数据所用。 一般来说用其存储的数据有比如:名字、...

    colezhou
  • Ant Motion动效插件分析

    通过调用封装的组件,部署组件DOM结构和其上面的参数完成动画效果的添加,同时用户可以更改组件的参数以及自定义组件的样式来实现所需要的展示效果。

    colezhou
  • CSS完成元素水平垂直居中

    首先这个元素和它的父元素都要设置定位,其中这个要水平垂直居中的元素需设置绝对定位absolute, 然后再给它设置样式{left: 0;right: 0;...

    colezhou
  • npm 使用小结

    本文内容基于 npm 4.0.5 概述 npm (node package manager),即 node 包管理器。这里的 node 包就是指各种 javas...

    静默虚空
  • 前端基础-Node.js包管理器npm

    上面的代码,我们使用npm安装了moment来进行格式化时间的处理,这就是使用第三方模块;

    cwl_java
  • 恭喜GitHub!今日喜提npm:Node Package Manager

    如果您曾在JS前端或node.js开发中投入过时间和精力的话,那么您肯定已经与npm打过多次交道了。正是由于npm的努力才使得JS成为了世界上最大的开发者生态系...

    用户1272076
  • 全球最大包管理器npm被GitHub收购,将与GitHub整合,网友:别被微软搞垮

    npm全称Node Package Manager,用JavaScript写成,已有超过10年历史,现在拥有130万个软件包,每月下载量达750亿次。

    量子位
  • 为npm设置代理

    npm全称为Node Packaged Modules。它是一个用于管理基于node.js编写的package的命令行工具。其本身就是基于node.js写的,这...

    墨文
  • 升级npm

    程序员不务正业
  • NPM命令实用使用技巧总结

    我们经常使用npm init来创建项目,并按照提示输入项目信息(项目名称、作者等),但是,如果我们并不关心项目信息,并且保留默认值,那么我们对 npm 请求的每...

    winty

扫码关注云+社区

领取腾讯云代金券