构建npm配置包

@构建自己的npm包，解决nodejs编译报错问题

构建配置抽离成npm包

项目逐渐增多，修改打包配置已经成为一个麻烦点，难点不大操作复杂，就想讲各种打包配置抽离成npm包，可以一键修改所有项目的配置

使用知识点

nodejs
shelljs
webpack node.js API
commander.js
typescript

开始抽离

配置命令

// package.json 中配置bin属性，定义命令名及执行文件
"bin": {
    "pack": "lib/cli.js"
  },
// 配置发布内容 
"files": [
    "scripts",
    "lib"
],

执行文件

文件是在命令中执行，需要根据node版本兼容es6判断自己的命令文件书写情况，我这里使用node版本为v14.xx.xx, 14开头的都可以，不兼容import、export，所有我写的时候会用typescript写，编译到lib目录下会用兼容es5方式

// src/cli.ts 读取命令

import { Command } from 'commander';
const program = new Command();

// 配置对象
const webpackConfig = {
	entry: './src/index.js',
	...
};

// 执行dev 命令时调用方法
const aa = () => {
	// 执行打包
	webpack(webpackConfig , (err, stats) => {
		// 处理错误	
		if (err) {
	     console.error(err.stack || err);
	      if (err.details) {
	        console.error(err.details);
	      }
	      return;
	    }
	
	    const info = stats.toJson();
	    if (stats.hasErrors()) {
	      console.error(info.errors);
	    }
	
	    if (stats.hasWarnings()) {
	      console.warn(info.warnings);
	    }
		// 打印执行成功信息，可以根据需要自行配置
	    console.log(stats.toString({
	      chunks: false, // 使构建过程更静默无输出
	      colors: true, // 在控制台展示颜色
	      modules: false,
	      children: false,
	      chunkModules: false
	  	}));
	});
}

const version = require("../package.json").version;
program
  .version(version, "-v, --version")
// 命令后的参数， 例如 git add , dev 就相当于add, 调用dev命令会执行aa方法
program.command('dev').action(aa);

// 终止参数处理，命令参数需要放在地方调用之前
program.parse(process.argv);

命令执行环境

以下错误添加 #!/usr/bin/env node 解决

执行环境

process.cwd() 获取node.js进程的当前工作目录，process.chdir改变当前工作目录

const rootDir = process.cwd();
// 将当前工作目录改为node.js进程的工作目录
process.chdir(rootDir);

解析

// tsconfig.json配置
{
  "compilerOptions": {
    "target": "es5",  // 解析为es5
    "outDir": "./lib",
    "declaration": true,
    "baseUrl": ".",
    "jsx": "preserve",
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "moduleResolution": "Node",
  },
  "include": ["src/**/*"]
}

发布

npm run publish