阅读 24

我的第一个开源项目(全纪录)

我想,每个程序员都有一个“开源”梦,这是我的第一步。

写在前面

如题,本文会详实的记录我做accurate-math这个开源项目的全过程,每一条命令、每一行代码、每一处细节。 先简单介绍下accurate-math项目:一个极简js库,用于解决js浮点数四则运算结果不准确的问题。

console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.14 / 0.2); // 0.7000000000000001
console.log(1 - 0.8); // 0.19999999999999996 
console.log(6 * 0.7); // 4.199999999999999 
console.log(0.1 + 0.2); // 0.30000000000000004 
console.log(0.1 + 0.7); // 0.7999999999999999 
console.log(1.2 / 0.2); // 5.999999999999999
复制代码

用到的技术:git、npm、webpack、javascript。

一、在github创建项目

在github上新建项目并克隆到本地。

git clone https://github.com/qq9694526/accurate-math.git
复制代码

备注:1.创建项目的名字,一定要在github和npm上都搜索一下,确保无重名,否则会影响最终在npm上的发布。2. .gitignore选择Node。

二、项目构建

  1. npm初始化项目
cnpm init -y 
复制代码
  1. 安装webpack
cnpm i --save-dev webpack webpack-cli webpack-dev-server
复制代码
  1. 创建目录
mkdir release src example
复制代码
  1. 新建文件
  • 在根目录下新建webpack.config.js ,内容如下:
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'release'),
    filename: 'accurate-math.js'
  },
  devServer: {
    contentBase: path.join(__dirname, "./"),
    compress: true,
    port: 9000
  }
};
复制代码
  • 在src目录下新建index.js。这里先建好,内容在随后的开发阶段再填充。
  • 在example目录下新建demo.html,同上。
  1. 在package.json中配置快捷命令
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",// 压缩打包
    "start": "webpack-dev-server --open" // 示例用的web服务
  },
复制代码

三、项目开发

  1. 功能开发
  • 在src/index.js中添加add、sub、mul、div这四个方法,分别对应js四则运算中的加减乘数。具体代码就不贴了,有兴趣的参看src/index.js
  • 使用webpack对代码进行压缩打包,生成accurate-math.js。
npm run build 
复制代码
  • 在根目录下创建index.js,供npm安装使用。
'use strict'

module.exports = require('./release/accurate-math.js')
复制代码
  1. 编写示例
  • 在example/demo.html中编写示例,测试使用4种方法。详情见github的example/demo.html
  • 启动web服务后, 浏览器访问http://localhost:9000/example/demo.html,查看示例及测试结果。
npm run start 
复制代码
  1. 完善README Readme是开源项目的一张脸,用户的第一印象。一个好的Readme应该包含产品简介、产品安装和下载、快速使用、交流提问区、关于作者等信息,且要足够简练。 详情见github的Readme.md
  2. 提交至远程仓库
git commit -am "first commit"
复制代码
  1. 打个标签,标记发布结点,以示重要。它对应着github远程库上的releases。
git tag -a 'v1.0.0' -m 'v1.0.0'

git push origin v1.0.0
复制代码

四、发布到npm

  1. npm身份认证
npm add user

npm login
复制代码
  1. 通过邮箱验证后,执行发布命令。
npm publish .
复制代码

备注:npm发布后撤销会非常麻烦,请务必充分测试和再三检查readme,确认无误。

五、使用体验

至此,咱们或者其他用户就可以通过npm安装并使用咱们自己刚刚编写的accurate-math插件了。

npm i accurate-math -D
	
require("accurate-math")
复制代码

满满的成就感!!!

最后

关注下面的标签,发现更多相似文章
评论