从0开发一个自己的npm包

之前写过一些npm包,但是每次都会忘记具体流程,今天做个简单记录。

一、注册npm账号

https://www.npmjs.com

二、开发自己的npm包

1. 初始化npm包

npm init

生成package.json文件

{
  "name": "create-random-value",
  "version": "1.0.0",
  "description": "通过传参生成指定长度的随机字符串",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "random",
    "string",
    "node",
    "vue"
  ],
  "author": "fujinting",
  "license": "ISC"
}

2. 开发npm包
"use strict";

const number = "123467890";
const bigLetter = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const smallLetter = "abcdefghijklmnopqrstuvwxyz";
const punctuation = "~!@#$%^&*()_+-=[]{}|;:,./<>?";

function random(length, option) {
  let char = "";
  let result = "";

  length || (length = 8);
  option || (option = {});

  if (option === true) {
    char = number + bigLetter + smallLetter + punctuation;
  } else if (typeof option == "string") {
    char = option;
  } else {
    if (option.number !== false) {
      char += typeof option.number == "string" ? option.number : number;
    }

    if (option.bigLetter !== false) {
      char +=
        typeof option.bigLetter == "string" ? option.bigLetter : bigLetter;
    }
    if (option.smallLetter !== false) {
      char +=
        typeof option.smallLetter == "string"
          ? option.smallLetter
          : smallLetter;
    }

    if (option.punctuation) {
      char +=
        typeof option.punctuation == "string"
          ? option.punctuation
          : punctuation;
    }
  }

  while (length > 0) {
    length--;
    result += char[Math.floor(Math.random() * char.length)];
  }
  return result;
}
module.exports = random;

这是一个根据传入的参数,生成随机字符串的插件,使用文档下篇文章会给出,大家也可以下载使用下。

三、 上传npm包

如果你是第一次开发npm包,需要 npm adduser

当然我不是,所以我只需要 npm login 就可以了

输入 username,password ,email,这时候保证自己的npm源(镜像)是npm官方自己的 https://registry.npmjs.org/,不是请 切换 哦,否则报错提示。

接下来使用命令发布这个包

npm publish

四、检查看看

在这里插入图片描述

在这里插入图片描述
success!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将 Theia 的 api-samples 抽离出来成为一个 npm ,您可以按照以下步骤操作: 1. 创建一个新的 npm ,可以使用以下命令: ``` mkdir theia-api-samples && cd theia-api-samples npm init ``` 2. 在新的 npm 中创建一个名为 `theia-extension` 的文件夹。 3. 将 Theia 项目中的 `theia-samples/api-samples` 目录复制到 `theia-extension` 文件夹中。 4. 在 `theia-extension` 文件夹中创建一个 `package.json` 文件,并添加以下代码: ``` { "name": "@your-scope/theia-api-samples", "version": "1.0.0", "description": "API samples for Theia IDE", "main": "lib/index.js", "license": "MIT", "dependencies": { "@theia/core": "latest", "@theia/filesystem": "latest", "@theia/workspace": "latest" } } ``` 注意,在 `dependencies` 中添加了 `@theia/core`、`@theia/filesystem` 和 `@theia/workspace` 依赖项,这些依赖项是 api-samples 所需的。 5. 在 `theia-extension` 文件夹中创建一个 `tsconfig.json` 文件,并添加以下代码: ``` { "compilerOptions": { "module": "commonjs", "target": "es6", "lib": ["es6", "dom"], "declaration": true, "outDir": "lib" }, "include": ["src/**/*"], "exclude": ["node_modules", "**/*.test.ts"] } ``` 6. 在 `theia-extension` 文件夹中创建一个 `src` 文件夹,并在其中创建一个 `index.ts` 文件,并添加以下代码: ``` import { ContainerModule } from '@theia/core/lib/common'; import { FilesystemSample } from './filesystem-sample'; import { WorkspaceSample } from './workspace-sample'; export default new ContainerModule(bind => { bind(FilesystemSample).toSelf(); bind(WorkspaceSample).toSelf(); }); ``` 这将导出一个 `ContainerModule`,其中含 `FilesystemSample` 和 `WorkspaceSample`。 7. 在 `theia-extension` 文件夹中创建一个 `filesystem-sample.ts` 文件,并添加以下代码: ``` import { injectable } from 'inversify'; import { UriAwareCommandHandler } from '@theia/core/lib/common/uri-command-handler'; import { Command } from '@theia/core/lib/common/command'; import { FileSystem } from '@theia/filesystem/lib/common/filesystem'; import URI from '@theia/core/lib/common/uri'; @injectable() export class FilesystemSample implements UriAwareCommandHandler { readonly id = 'filesystem-sample'; execute(uri: string): void { const fileSystem = new FileSystem(new URI(uri)); fileSystem.readFile('/example.txt').then(content => console.log(`Content of example.txt is: ${content}`) ); } isEnabled(uri: string): boolean { return true; } readonly command: Command = { id: this.id, label: 'Filesystem Sample' }; } ``` 这将创建一个 `FilesystemSample` 类,该类读取文件系统中的 `/example.txt` 文件,并在控制台中输出其内容。 8. 在 `theia-extension` 文件夹中创建一个 `workspace-sample.ts` 文件,并添加以下代码: ``` import { injectable } from 'inversify'; import { UriAwareCommandHandler } from '@theia/core/lib/common/uri-command-handler'; import { Command } from '@theia/core/lib/common/command'; import { Workspace } from '@theia/workspace/lib/browser/workspace-service'; import URI from '@theia/core/lib/common/uri'; @injectable() export class WorkspaceSample implements UriAwareCommandHandler { readonly id = 'workspace-sample'; execute(uri: string): void { const workspace = new Workspace(new URI(uri)); workspace.getRoot().then(root => console.log(`Workspace root is: ${root.uri}`) ); } isEnabled(uri: string): boolean { return true; } readonly command: Command = { id: this.id, label: 'Workspace Sample' }; } ``` 这将创建一个 `WorkspaceSample` 类,该类获取工作区的根目录,并在控制台中输出其 URI。 9. 在 `theia-extension` 文件夹中创建一个 `index.ts` 文件,并添加以下代码: ``` export * from './filesystem-sample'; export * from './workspace-sample'; export * from './container'; ``` 这将导出 `FilesystemSample`、`WorkspaceSample` 和 `ContainerModule`。 10. 在根目录中创建一个 `.npmignore` 文件,并添加以下代码: ``` # Ignore development files .vscode/ src/ test/ tsconfig.json tslint.json ``` 这将忽略开发文件,以减小 npm 的大小。 11. 在根目录中创建一个 `.gitignore` 文件,并添加以下代码: ``` # Ignore development files .vscode/ src/ test/ tsconfig.json tslint.json # Ignore build output node_modules/ lib/ ``` 这将忽略开发文件和构建输出。 12. 使用以下命令在本地进行测试: ``` yarn yarn build ``` 13. 使用以下命令将发布到 npm: ``` npm login npm publish --access=public ``` 这将将发布到公共的 npm registry 中。 现在,您已经成功地将 Theia 的 api-samples 抽离出来成为一个 npm 。其他开发人员可以使用 `npm install @your-scope/theia-api-samples` 命令安装并使用这个

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值