js，如何管理js代码呢

1.为什么需要管理好js代码

     1.1 你有遇到这些情况吗

     其他项目使用自己慢慢丰富的工具类，你是copy过去的？

     难免需要删除整个node_modules并重装依赖库，你会因为重写过某些库的代码而纠结？

     其他人协作开发时，你重写的库别人拉不到或者需要手动或者跑脚本来同步？

     你发现你的工具类有某个较大错误，而那么多项目都依赖了？

     就像你有时看着镜子里的自己感慨造物之美的时候，你觉得你开发的工具真的好用，想有人使用并给你赞美的时候，你不知道怎么让别人用？

     1.2 那管理好js代码的好处至少就有以下

     为了代码复用可以只用一行代码，获取即用

     当你需要用别人的库且需要重写一部分代码的时候

     散播自己的光辉，假如自己是金子

2.那如何管理js代码呢——发布npm库

     2.1 首先你要有个npm账号

     进入npm官网

     要填写Name，Email，Username, Password

     2.2 配置终端

     ~ npm adduser

     Username: ranran_2

     Password:

     Email: (this IS public) 546910852@qq.com

     Logged in as ranran_2 on

     ~ npm whoami

     ranran_2

     npm adduser 使用此命令登录终端，依次输入在npm官网注册的账号、密码和邮箱

     npm whoami 查看当前登录的用户

     npm logout 退出登录

     2.3 发布自己的npm库

     以下以一个react-native的工具库rncommon为例

     例子为rn，是因为最后总有一个环境使用我们发布的库，我们的库需要使用该开发环境的api来写，但最后发布库的时候我们只保留我们自己写的工具即可。发布流程对于所有js代码是一致的。

     2.3.1 初始化工程,目录如下

     2.3.2 写将要发布的库的内容

     在根目录添加目录common

     在目录下新建MyFlatList.js,封装下常用的列表控件。

     index.js,用于导出控件

     导入测试完控件，就可以准备发布了

     import MyFlatList from './common'

     const App: () => React$Node = () => {

     return (

     <>

     <StatusBar barStyle="dark-content"/>

     <SafeAreaView>

     <MyFlatList

     renderItem={renderItem}

     refreshing={false}

     data={['a','b']}

     />

     </SafeAreaView>

     </>

     );

     };

     当前目录如下

     2.3.3 初始化库发布基本文件

     在终端进入

     目录,输入

     npm init

     common npm init

     This utility will walk you through creating a package.json file.

     It only covers the most common items, and tries to guess sensible defaults.

     See `npm help json` for definitive documentation on these fields

     and exactly what they do.

     Use `npm install <pkg>` afterwards to install a package and

     save it as a dependency in the package.json file.

     Press ^C at any time to quit.

     package name: (common) react-native-fastcommon

     version: (1.0.0)

     description: commonly used widget&util for rn

     entry point: (index.js)

     test command:

     git repository:

     keywords: recat-native common util widget

     author: ran

     license: (ISC)

     About to write to /Users/chenweicheng/git/reactnative/rncommon/common/package.json:

     {

     "name": "react-native-fastcommon",

     "version": "1.0.0",

     "description": "commonly used widget&util for rn",

     "main": "index.js",

     "scripts": {

     "test": "echo \"Error: no test specified\" && exit 1"

     },

     "keywords": [

     "recat-native",

     "common",

     "util",

     "widget"

     ],

     "author": "ran",

     "license": "ISC"

     }

     Is this OK? (yes) yes

     命令用于初始化，生成 package.json 文件

     package name 安装这个npm库时的名字，引用模块，具体可看下文使用

     version 版本号，初次发布直接回车即可，更新则需使版本号大于上次版本

     description 库描述

     entry point 入口文件，默认,也可以填其他目录里的文件名

     test command 直接回车默认即可

     git repository: 库的代码仓库位置

     keywords: 库关键词

     author: ran 你的大名

     license: (ISC) 直接回车默认即可

     最后一步会预览整个

     package.json

     文件，没问题直接 输入

     yes

     即可；如果需要修改上面内容，打开文件直接修改即可。

     2.3.4 发布库

     common npm publish

     npm notice

     npm notice react-native-fastcommon@1.0.0

     npm notice === Tarball Contents ===

     npm notice 334B package.json

     npm notice 87B index.js

     npm notice 1.8kB MyFlatList.js

     npm notice === Tarball Details ===

     npm notice name: react-native-fastcommon

     npm notice version: 1.0.0

     npm notice package size: 1.0 kB

     npm notice unpacked size: 2.3 kB

     npm notice shasum: c4dbbd642a7485de2cbdef19ba873759bfec5403

     npm notice integrity: sha512-yFgcmcwjbDgDO[...]Ak0SpuWI8yptw==

     npm notice total files: 3

     + react-native-fastcommon@1.0.0

     2.3.5 自己安装库测试使用

     回到项目根目录，使用npm install --save 加你的npm库名（package.json的name）安装库，安装成功如下：

     common cd ..

     rncommon npm install --save react-native-fastcommon

     npm WARN @typescript-eslint/eslint-plugin@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.

     npm WARN @typescript-eslint/parser@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.

     npm WARN eslint-plugin-react@7.12.4 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.

     npm WARN eslint-plugin-react-native@3.6.0 requires a peer of eslint@^3.17.0 || ^4 || ^5 but none is installed. You must install peer dependencies yourself.

     npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

     added 1 package from 1 contributor and audited 951428 packages in 8.888s

     found 0 vulnerabilities

     引用库

     import MyFlatList from './common' //这个是之前本地文件的引用

     改成

     import MyFlatList from 'react-native-fastcommon' //这个是通过安装的引用

     测试成功，和引用本地是不是一样呢

     至此，你的第一个库发布成功，万事开头难，恭喜你踏出第一步。