将做好的前端组件制作成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