发布typescript的npm的多模块包

最近在写一些本地小脚本，辅助开发，从纯js过渡到了ts，记录一下。没有使用一个npm包工具，纯单撸。

1.安装ts环境

//如果安装全局模块
npm install typescript -g

2.新建个文件夹，点住shift+鼠标右键，点击打开Powershell的窗口，输入

tsc --init

来创建tsconfig文件，如果Powershell提升权限问题，可以百度获取权限的方法。

3.编辑tsconfig文件

{
  "compilerOptions": {
    "target": "ESNEXT", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "declaration": true, /* Generates corresponding '.d.ts' file. */
    "outDir": "dest", /* Redirect output structure to the directory. */
    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
  },
  "exclude": [
    "./node_modules",
    "./dest"
  ]
}

declaration这个字段很关键。

4.创建package.json文件，原理同2，在powershell中输入

npm init --yes

这是直接创建好文件，可以使用vscode打开它，再进行编辑，其中main就是入口文件，虽然是ts，但是导出的包中主要是js起作用，所以我写了index.ts当成一个入口文件，顺便写2个测试模块,例如

模块a.ts
export default 模块a{
    static log(...args)    
    {
        console.log(...args)
    }
}



模块b.ts
export default 模块b{
    static fly(...args)    
    {
        console.log(...args)
    }
}

index.ts
import 模块a from "模块a";
import 模块b from "模块b";

export { 模块a, 模块b}

所以，我的入口文件就是这样的

 "main": "dest/index.js"

是.js文件，不是写错的.ts。

5.package.json中的name字段，这是你的包名，进入npm官网中，如果你有账号，跳过此步骤，    注册账号，add Organization 创建你的包名，比如叫xxx-npm。你的package.json中的name就写你的包名。

6.同步骤2，打开Powershell,输入npm adduser,输入你的账号信息（最好在vscode中按住ctrl+shift+b,启动构建或者监视，提前编译好你的代码）。然后在Powershell中输入

npm publish

由于在package.json中默认没有写files字段，进行文件上传筛选，所以publish会将你的所有文件上传，有特殊需求的可以编辑files字段进行处理。具体可以去查看发包流程。

7.在其他地方新建好文件夹，创建好tsconfig文件

{
  "compilerOptions": {
    "target": "ESNEXT", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "outDir": "./out/", /* Redirect output structure to the directory. */
    "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
    "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
  },
  "exclude": [
    "node_modules",
    "out"
  ]
}

在项目内，启动Powershell，输入npm install xxx-npm导入你上传的模块包

然后新建个mian.ts，启动vscode的监听，你就可以测试你的模块了

import { 模块a，模块b } from "xxx-npm"

以下是总结遇到的问题：

1.

SyntaxError: Cannot use import statement outside a module

调用模块出现此问题，是我在导入

import  fs from "fs";

中遇到的，后来我改为

import * as fs from "fs";

就运行成功了，有些解决方案是去package.json中添加或者改写

 "type": "module"

可惜我这边改写后运行遇到新的问题。

2.

我在我的index.ts中新增了个String的方法

String.prototype.format = function (...args) {
    let index = 0;
    return this.replace(/%[dfs]/g, function (str) {
        let s = args[index++];
        return !!s ? s : str;
    });
};

作为包，外部始终无法引用到String的format。后来在index.ts中申明了个全局才成功

declare global {
    interface String {
        /**
        * 格式化字符串 %[sdf]
        * @示例：
        * "%d上学了".format("小金鱼")  ====》小金鱼上学了
        */
        format: (...args: any[]) => string;
    } 
}

好了，大家也可以下载我的包去对比，代码使用环境是前端的，做小测试，未在正式环境中使用过。

npm install yyd-npm

3.

有时候明明安装了某个模块，但是就是提示找不到报错，可以先把它卸载了，再安装一次！