最近在写一些本地小脚本，辅助开发，从纯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.
有时候明明安装了某个模块，但是就是提示找不到报错，可以先把它卸载了，再安装一次！
好文阅读
您阅读本篇文章共花了：
发表评论