npm发布自己的ramda工具包

npm 发布

ps 最近看了个结合Bit.dev复用组件的文章
学习函数式编程,用的是ramda函数库,然后之前做项目都是把自己写的ramda的utils复制一份.近期总结时候发现,每个项目用到的函数都不一样,这么来回拷贝还挺麻烦的..就想到把自己的给发布出去,写项目的时候引用一下,就能保证是最新的了.稍微查了一下资料,还挺简单,步骤如下

• 初始化
  因为可能要用到ES6,npm init后,需要填入babel包.

  npm init
  yarn add babel-cli babel-core babel-preset-es2015  ramda

• 项目架构

  tree -a -I "dist|node_modules|.git" -L  2 12
  ramda_util
  ├── .babelrc
  ├── .gitignore
  ├── .npmignore
  ├── LICENSE
  ├── README.md
  ├── lib                # 打包目录
  ├── package.json
  ├── src                  #我的代码
  │   ├── ArrayUtils.js
  │   ├── ObjUtils.js
  │   ├── domOper.js
  │   └── index.js

• package.json
  需要注意 尽量把依赖写在devdependies 里面,要不容易造成依赖两份,如react,导致错误.比如用户是react15,你用了react16里面的特性,那用户就启动不了了.

  "scripts": {
    "compile": "babel -d lib/ src/",
    "prepublish": "npm run compile",       ## 发布之前执行一下?
    "test": "echo \"Error: no test specified\" && exit 1"
  },

• npm 添加用户

  npm adduser

• 发布

  npm publish

• 验证
  打包组件，只需要运行 npm run build 就可以了。
  接下来可以通过 npm link 把打包之后的组件引入到 global node_modules 中，然后在验证 demo 中再通过 npm link react-tiny-autosuggest 引入这个组件，并验证是否符合预期。

  // At development directory
  npm run build
  npm link
  
  cd [test project folder]
  npm link react-tiny-autosuggest

  接下下 demo 里面就可以直接 import AutoSuggest from ‘react-tiny-autosuggest’ 了。

• 技巧
  修改代码和readme.md后,执行 npm version patch 就不用手工改版本号了.

我的工具

github地址

• 使用

  import {ArrayUtils } from 'ramda_util/lib'
  const result = ArrayUtils.mergeWith([1,2,3],[2,3,4])
  console.log(` ${JSON.stringify(result,null,4)}`)

  参考

• 我写的vue组件库
• 如何发布自己的NPM包（模块)
• 结合Bit.dev复用vue组件
• 如何创建一个前端 React 组件并发布到 NPM
• 发布react组件到npm总结