【原创】如何高效管理你的js代码

最新推荐文章于 2022-02-24 15:51:41 发布

师长学不动了

最新推荐文章于 2022-02-24 15:51:41 发布

阅读量409

点赞数

文章标签： js java 前端程序员管理

本文链接：https://blog.csdn.net/zlc3323/article/details/103346928

版权

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

1.1 你有遇到这些情况吗

其他项目使用自己慢慢丰富的工具类，你是copy过去的？
难免需要删除整个node_modules并重装依赖库，你会因为重写过某些库的代码而纠结？
其他人协作开发时，你重写的库别人拉不到或者需要手动或者跑脚本来同步？
你发现你的工具类有某个较大错误，而那么多项目都依赖了？
就像你有时看着镜子里的自己感慨造物之美的时候，你觉得你开发的工具真的好用，想有人使用并给你赞美的时候，你不知道怎么让别人用？

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

为了代码复用可以只用一行代码，获取即用
当你需要用别人的库且需要重写一部分代码的时候
散播自己的光辉，假如自己是金子

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

2.1 首先你要有个npm账号

进入npm官网（https://www.npmjs.com/）

要填写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 https://registry.npmjs.org/.
➜  ~ 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
在common目录下新建MyFlatList.js,封装下常用的列表控件。
在common目录下新建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 初始化库发布基本文件

在终端进入common目录,输入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

npm init 命令用于初始化，生成 package.json 文件
package name 安装这个npm库时的名字，引用模块，具体可看下文使用
version 版本号，初次发布直接回车即可，更新则需使版本号大于上次版本
description 库描述
entry point 入口文件，默认index.js,也可以填其他目录里的文件名
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                                       
npm notice
+ 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.

+ react-native-fastcommon@1.0.0
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'  //这个是通过安装的引用

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

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

3.你可能会遇到的问题

1、

➜ common npm publish
npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node/7.5.0/bin/node" "/usr/local/bin/npm" "publish"
npm ERR! node v7.5.0
npm ERR! npm  v4.1.2
npm ERR! code ENEEDAUTH

npm ERR! need auth auth required for publishing
npm ERR! need auth You need to authorize this machine using `npm adduser`

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/chenweicheng/git/reactnative/MyNpm/android/react-native-ble/npm-debug.log

解决方法：按以上注册npm账号和配置终端操作

2、

➜ common npm publish
npm notice
npm notice 📦  react-native-common@1.0.0
npm notice === Tarball Contents ===
npm notice 330B  package.json
npm notice 87B   index.js
npm notice 1.8kB MyFlatList.js
npm notice === Tarball Details ===
npm notice name:          react-native-common
npm notice version:       1.0.0                                   
npm notice package size:  1.0 kB
npm notice unpacked size: 2.3 kB
npm notice shasum:        0cd0e980d78ac30b312a104dd9d5894f7a1617e2
npm notice integrity:     sha512-rDaR9EgiiijP+[...]/Kc9Nd/9Pw2XA==
npm notice total files:   3                                       
npm notice
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You do not have permission to publish "react-native-common". Are you logged in as the correct user? : react-native-common

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chenweicheng/.npm/_logs/2019-11-15T09_46_51_491Z-debug.log

解决方法：使用的库的名字已被使用（package.json 中name字段为npm库唯一），修改package.json的name字段即可

3、

➜ 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                                       
npm notice
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! you must verify your email before publishing a new package: https://www.npmjs.com/email-edit : react-native-fastcommon

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chenweicheng/.npm/_logs/2019-11-15T09_49_45_472Z-debug.log

解决方法：该账号需要验证邮箱，打开https://www.npmjs.com/email-edit 登录后按提示邮箱验证即可

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                                       
npm notice
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You cannot publish over the previously published versions: 1.0.0. : react-native-fastcommon

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chenweicheng/.npm/_logs/2019-11-15T10_16_43_432Z-debug.log

解决方法：因为之前已经发布过此模块的这个版本，修改提高package.json的version字段

5、

Username: ranran_2
Password:
Email: (this IS public) 546910852@qq.com
npm WARN adduser Incorrect username or password
npm WARN adduser You can reset your account by visiting:
npm WARN adduser
npm WARN adduser     https://npmjs.org/forgot
npm WARN adduser
npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node/7.5.0/bin/node" "/usr/local/bin/npm" "adduser"
npm ERR! node v7.5.0
npm ERR! npm  v4.1.2
npm ERR! code E401

npm ERR! unauthorized Login first: -/user/org.couchdb.user:ranran_2/-rev/undefined
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/chenweicheng/npm-debug.log

解决方法：假如是账号和密码错误，找回账号密码即可。假如确认账号密码无误。则按如下处理：If you have registered on https://www.npmjs.com/ and are sure that your username and password is correct, delete $HOME/.npmrc and try adduser again.This may be caused by a bug recorded here: https://github.com/npm/npm/issues/6545 (来自 http://stackoverflow.com/questions/38634586/npm-adduser-incorrect-username-or-password)

6、若遇到和问题5一样的情况，但用问题5解决方法无法解决，那有可能是设置镜像如淘宝镜像等，解决方法如下：命令行中输入：npm install -g nrm，安装nrm模块。

nrm ls 可以列出现在可以切换的npm仓库源。我的如下：

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

例如nrm use taobao,则是使用taobao镜像，我们切回默认的npm，nrm use npm即可解决问题了

———— e n d ————

师长学不动了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【原创】如何高效管理你的js代码

1.为什么需要管理好js代码1.1 你有遇到这些情况吗其他项目使用自己慢慢丰富的工具类，你是copy过去的？难免需要删除整个node_modules并重装依赖库，你会因为重写过某些库的代码而纠结？其他人协作开发时，你重写的库别人拉不到或者需要手动或者跑脚本来同步？你发现你的工具类有某个较大错误，而那么多项目都依赖了？就像你有时看...
复制链接

扫一扫