npmjs的发布

一、基本的操作

npmjs的官网地址:https://www.npmjs.com

以上传本地的 ~/Project/TestNPM 为例。

1、镜像的处理

1.1、查看npm当前登录源/使用的镜像

1
npm config get registry

1.2、设置镜像

1
2
npm config set registry https://registry.npmjs.org/				# 上传包必须使用原本的登录源
npm config set registry https://registry.npm.taobao.org/ # 原来错误的登录源

附:为了上传npm包能够成功,所以,如果你之前使用的是淘宝镜像,那么你就得执行此命令替换回原来的镜像。

2、npm的登录/连接

npm login的命令及执行结果如下:

错误的npm login

可以看到这边登录到了淘宝了,是错误的。

正确的npm login

##

1
2
3
4
5
npm config get registry

npm login

npm publish --access=public

附:如果你执意使用错误的登录源后,那么再去publish会出现如下错误。

错误1:npm ERR! 403 Forbidden - PUT https://registry.npm.taobao.org/testnpm - [no_perms] Private mode enable, only admin can publish this module

错误的登录源,导致的publish错误

错误2:npm ERR! 403 Forbidden - PUT https://registry.npmjs.org/testnpm - You do not have permission to publish "testnpm". Are you logged in as the correct user?

原因:组件版本已存在,更新版本号/版本名(如果该版本的名字已被占用),然后重新npm publish。

比如这里我们使用了已经被占用的testnpm

image-20190610112228108

修改成未被占用的名字lcqtestnpm,再npm publish后,

npm publish连接超时

网络翻墙后,再执行npm publish后,结果如下:

正确执行的结果如下

附:提交后的包地址为https://www.npmjs.com/package/lcqtestnpm

npmjs的调试

[Toc]

参考文章:npm link,你不知道的npm模块调试技巧

一、基本的操作

1. 背景

node 应用开发中,我们不可避免的需要使用或拆分为 npm 模块,经常遇到的一个问题是:

新开发或修改的 npm 模块,如何在项目中试验?

新同学一般会有以下几种方式:

为了方便示范,我们假设项目是 my-project, 需要用到一个独立的 my-utils 模块

1.1 发布一个 beta 版本

  • 优点:你高兴就好。
  • 缺点: 无趣+无趣+无趣,麻烦+麻烦+麻烦。

1.2 直接用相对路径安装

方式1:终端npm install 路径

1
2
$ cd path/to/my-project
$ npm install path/to/my-utils
  • 优点:简单明了
  • 缺点: 调试过程中往往需要微调,此时需要切换到 my-utils 目录修改,然后反复重新 install,很麻烦。

例如:

1
2
3
4
5
6
7
8
9
cd xxx/demo
npm install ../react-native-theme-overlay
附:../react-native-theme-overlay 这个路径是react-native-theme-overlay这个库其自身的pageage.json文件所在的路径

则package.json中
原来:
"react-native-theme-overlay": "^0.8.3",
现在:
"react-native-theme-overlay": "file:../react-native-theme-overlay",

方式2:直接在demo的package.json中处理。

做法,如上例子,直接写”file:../react-native-theme-overlay”

问题:如果调试的b库,依赖调试的a库,这个时候想a、b两个调试库都OK,应该怎么处理?

答:

1.3 使用软链

1
2
$ cd path/to/my-project/node_modules
$ ln -s path/to/my-utils my-utils
  • 优点:软链后,两边修改直接同步
  • 缺点: 指令操作麻烦,不同操作系统语法不一样

但其实 npm 本身已经对此类情况提供了专门的 npm link 指令。

相关文档: https://docs.npmjs.com/cli/link

下面我们简单介绍下用法:

1
2
$ cd path/to/my-project
$ npm link path/to/my-utils

简单的替换一个单词,就搞定了,cool~

如果这两种的目录不在一起,那还有一种方法:

1
2
3
4
5
6
7
$ # 先去到模块目录,把它 link 到全局
$ cd path/to/my-utils
$ npm link
$
$ # 再去项目目录通过包名来 link
$ cd path/to/my-project
$ npm link my-utils

该指令还可以用来调试 node cli 模块,譬如需要本地调试我们的 egg-init,可以这样:

1
2
3
4
$ cd path/to/egg-init
$ npm link
$ # 此时全局的 egg-init 指令就已经指向你的本地开发目录了
$ egg-init # 即可

想去掉 link 也很简单:

1
2
$ npm unlink my-utils 
或者 直接$ npm unlink 这样所有的link都会去除

3. 写在最后

  • 该方法只是为了最后一步调试,模块本身的正确性,应该更多的通过单元测试来保证。
  • 单元测试相关内容,可以参见:单元测试

第4节:ReactNative必备的语言基础知识

[TOC]

ReactNative必备的语言基础知识

参考文章:

ReactNative的语法基础要求JS,JSX,ES6.其中ES6是这三种语法的核心。系统学习ES6的语法是ReactNative编程的基本要求。

下面记录ES6的典型语法的示例,以方便编程中的随时查用。

一、关键字

参考文章:极客学院 ECMAScript 6 let 和 const 命令

关键字 用途 作用域
const 声明常量,不可修改
var 声明变量
let 声明变量 let 声明的变量只在它所在的代码块有效 for 循环的计数器,就很合适使用 let 命令。

二、变量的解构赋值

参考文章:

对变量复制时,当等号左边定义的变量和等号右边的赋值形式一致时,能够对变量自动赋值;

1
2
3
4
5
6
7
8
let {a, b} = {a:"x", b:"y"};
//a = x, b = y;

let [a, b] = [0, 1, 2, 3];
//a=0, b = 1;

let [a, ...b] = [0, 1, 2, 3];
//a=0, b = [1,2,3];

常见于:

  • style的解构赋值

三、Generator函数

参考文章:极客学院 ECMAScript 6 Generator 函数

通过在函数名前添加 * 和在方法中添加 yield 关键字来定义,控制函数的顺序执行.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 设有如下函数
function *genFun() {
yield 'Lily';
yield 'Json';
return 'Niu';
}


// 则以下第一种调用的写法及结果如下:
let gen = genFun();
genFun().next();//{value: 'Lily', done: false}
genFun().next();//{value: 'Json', done: false}
genFun().next();//{value: 'Niu', done: true}

// 则以下第二种调用的写法及结果如下:
for (i of gen) { //使用for of 语句来遍历
console.log(i);
}
//return后的元素,不会被遍历到
Lily
Json

四、Promise对象

参考文章:极客学院 ECMAScript 6 Promise 对象

通过定义Promise和关键字then的结合,可以方便实现函数的成功回调和失败回调。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
1)定义
var prom = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('download success')
resolve('success');
}, 1000);
});

prom.then((flag) => {
console.log('success block:' + flag);
}, (error) => {
console.log('failure block:' + error);
})

(2)async关键字和Promise实例相结合,实现多个异步线程的顺序执行;
async function foo() {
await new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 5000);
});

console.log('await function completed');
}
foo();
//打印消息会在5s后resolve回调执行后,才执行;

OnlineCoding在线编码

[TOC]

一、在线编码网站

https://codepen.io/ 支持 js 、html、vue、flutter 等
https://jsfiddle.net/ 支持 js 、html
https://jsbin.com/ 支持 js 、html
https://babeljs.io/repl 支持 js 以及各种高级语法、带 console
https://codesandbox.io/ 支持 vue、angular、react、nest.js、svelte 等
https://stackblitz.com/ 支持 angular、react、ionic、svelte 等
https://dartpad.dev/
国内版:https://dartpad.cn/
支持flutter

二、Codepen.io

参考文章:

语言 模版 编辑器入口
Flutter https://codepen.io/topic/flutter/templates https://codepen.io/pen/editor/flutter
Vue https://codepen.io/topic/vue/templates https://codepen.io/pen/editor/vue

UI2Code

[TOC]

背景

设计稿转代码

参考文档:如何将设计稿转成高度可维护的代码?

https://www.figma.com/community/plugin/1329812760871373657/codia-ai-design-screenshot-to-editable-figma-design

一、UI2Code 工具汇总

对于设计稿转代码的需求,在线产品设计工具 Pixso 提供了 以下3款设计插件:

插件 官网 代码水平 前端 App Flutter 备注
1 Pixso to code https://pixso.cn/app 初级 Tailwind、HTML SwiftUI flutter 当前页直接可用
2 Code.fun https://code.fun/ 中级 H5、小程序等 需转网站
3 coDesign https://codesign.qq.com/ 初? H5、? Code.fun翻版

与以往传统的从设计软件中导出 HTML 不同,CodeFun 插件不仅可以智能分析页面布局,生成非绝对高宽的 Flexbox 代码,而且还可以识别循环列表、九宫格、等比例分配等多种业务场景。

CodeFun 生成的代码简短可读,语义化程度高,基本上可以达到中级工程师的水准,实测研发效率至少提升 500%。

image-20240317205429507

image-20240317215437611

二、UI2Code 代码提取

1、Pixso to code

image-20240317214414634

2、Code.fun

1、在Pixso上无法直接使用 Code.fun 将本应用中的设计稿转成代码。所以需要先将其上传到对应网站中

image-20240317212302534

2、上传后,你将需要到所上传的指定位置查看设计稿及转码。进入指定页面的代码查看方法如下:

image-20240317213146616

3、coDesign

详见:codesign官网:智能生成页面代码

三、UI2Code 代码提取的验证

提取的代码可在下述在线网站中进行验证。

详见:OnlineCoding在线编码

End

WebStorm

[TOC]

一、注册码/破解

二、代码格式化

image-20220318221847396

image-20220317154211932

三、VSCode好用的工具

1、koroFileHeader(vscode文件头部注释插件)

1、安装

image-20220413163004512

2、配置

image-20220413160825547

初始值为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"diffEditor.ignoreTrimWhitespace": true,
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [
80
],
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": false
},
"workbench.colorTheme": "Visual Studio Dark",
"eslint.alwaysShowStatus": true,
"dart.debugExternalLibraries": false,
"dart.debugSdkLibraries": false,
"dart.debugExternalPackageLibraries": false,
"dart.flutterSdkPath": "/Applications/flutter",
"editor.formatOnSave": true
}

在json后面加上以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// "editor.fontSize": 20,
// "files.autoSave": "onFocusChange",
// "editor.formatOnPaste": true,
// "workbench.colorTheme": "Solarized Light",
// "[vue]": {
// "editor.defaultFormatter": "octref.vetur"
// },
// "[javascript]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode"
// },
"fileheader.customMade": {
"Author": "dvlproad",
"Date": "Do not edit",
"LastEditors": "填入自己的名字",
"LastEditTime": "Do not edit",
"Description": "",
"FilePath": "Do not edit",
},
"fileheader.cursorMode": {
"description": "",
"event": "",
"param": "",
"return": ""
},
"fileheader.configObj": {
"prohibitAutoAdd": [
"json",
"md",
], // 禁止.json .md文件,自动添加头部注释
},

3、如何使用

文件头部添加注释:

快捷键:ctrl+alt+i
功能:保存文件的时候,自动更新最后的编辑时间和编辑人
在光标处添加函数注释:

快捷键:ctrl+alt+t
功能在光标处自动生成一个注释模板
效果

1
2
3
4
5
6
7
8
/*
* @Author: dvlproad
* @Date: 2022-04-13 10:17:11
* @LastEditors: 填入自己的名字
* @LastEditTime: 2022-04-13 16:26:54
* @Description:
* @FilePath: /wish/Users/qian/Project/flutter_effect_kit/lib/src/hud/loading_util.dart
*/

2、GitLens(VsCode中好用的git源代码管理插件:每一行代码旁边都有日志)

四、VSCode快捷键

VSCode快捷键1_前进后退

VSCode快捷键1_前进后退

五、更多好用VSCODE 插件推荐(2023版)