原生JS写全屏滚动插件教程

第五节

  • 发布github
  • 发布npm

发布github

在看之前,可以参考本教程的原型,也就是鄙人写的全屏滚动插件的开源项目slidePage,本教程用到的代码包括这整个教程网站的全屏滚动交互都是来自于这个开源项目。所以可以保证教程里的代码完全原创,写教程不易,感谢大家的支持。

github是全球最大的开源社区。我们可以把平时积累的有趣有用的代码发布到github上开源,原文地址:发布项目到GitHub

第一步

需先做好准备工作:
首先,你需要有一个GitHub帐号,
https://github.com ,如何注册这个就不用说了。
然后安装Git。在https://git-scm.com 下载对应的系统版本就好了。
输入

                        
git --version
                        
                    

出现以下结果就说明安装成功了

用刚才注册的GitHub帐号登录完成后,可以看到:

点击'New Repository'创建一个新的仓库

项目名称必须要填,描述可以不用,最后一个是否初始化README可以选,也可以后面自己新建。暂时先不选。
点击'create repository' 完成创建。

先把框里面的路径复制下来,后面需要用到,现在在GitHub上的操作基本已经完成了。

第二步

先进入到项目根目录下

                        
cd <项目路径>
                        
                    

再进行初始化

                        
git init
                        
                    

使用

                        
git add .
                        
                    

将本目录下的所有文件添加到git管理
然后使用

                        
git commit -m '备注信息'
                        
                    

提交直本地git仓库,现在已经完成了本地的提交,现在我们需要继续关联到GitHub上
使用

                        
git remote add origin <复制过的仓库地址>
                        
                    

最后使用

                        
git push -u origin master
                        
                    

将本地代码提交至GitHub

注意:第一次使用的时候会提示配置用户名密码,将你在GitHub上注册的配置一下就好了。

发布npm

npm是javascript社区最多人用的包管理库,可以很方便的从这上面安装想要的包到自己的项目里,原文地址:如何发布自己模块到NPM

安装node.js

可以进入 https://nodejs.org/zh-cn/download/ 下载适合你的系统的安装包,安装好便自带了npm命令。已有node环境可以跳过

创建项目

                        
npm -init
                        
                    
                        
name: (my-npm)
version: (1.0.0)
description: 0.0.1
entry point: (index.js)
test command:
git repository:
keywords:
author: Awe
license: (ISC) MIT
About to write to F:\github\my-npm\package.json:

{
    "name": "my-npm",
    "version": "1.0.0",
    "description": "0.0.1",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Awe",
    "license": "MIT"
}
Is this ok? (yes)
                        
                    

接着就依次填写, 不想填写的话也可以一路Enter

name:
 模块名,之后发布之后就可以让用户npm install xxxx来引用你的开源模块了

version:
 版本号,语义版本号分为X.Y.Z三位,分别代表主版本号、次版本号和补丁版本号。当代码变更时,版本号按以下原则更新。
 如果只是修复bug,需要更新Z位。
 如果是新增了功能,但是向下兼容,需要更新Y位。

 如果有大变动,向下不兼容,需要更新X位。

description:
 简单介绍自己的模块

main:
 入口文件,必要,当通过require('xxx')时,是读取main里声明的文件

test command:
 测试命令

git repository:
 git仓库地址

keywords:
 关键词,可以通过npm搜索你填写的关键词找到你的模块

author:
 作者信息,可以之后编辑更详细一些

license(ISC):
 代码授权许可 可以参考这里

以上放心可以大胆写,因为之后反正要改。
初始化项目完成,可以看到目录中出现了一个叫 package.json 的文件

                        
{
    "name": "my-npm",
    "version": "1.0.0",
    "description": "0.0.1",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Awe",
    "license": "MIT"
}
                        
                    

对于开源项目来说最重要的是main字段,main填写的是你要给别人用的模块文件,一般情况下使用require函数引用个开源项目的话指向的就是这个main的值,所以为了减少使用者引入包的大小,这个main指向的文件一般是经过gulp或者grount编译压缩过的文件,而不是源代码文件。 你可以参考我的slidePage开源项目的 package.json

发布模块

1.在npm 注册用户
2.在本地登录自己的npm账号

                        
npm login 
                        
                    

3.发布模块

                        
npm publish 
                        
                    

附赠:

                        
npm update <package>
//可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。

npm cache clear
//可以清空NPM本地缓存,用于对付使用相同版本号发布新版本代码的人。

npm unpublish <package>@<version>

//可以撤销发布自己发布过的某个版本代码。
                        
                    

本教程已完结

想要更多好玩的教程请联系下方邮箱
lipten@foxmail.com