@構(gòu)建npm配置包

構(gòu)建配置抽離成npm包

項(xiàng)目逐漸增多，修改打包配置已經(jīng)成為一個(gè)麻煩點(diǎn)，難點(diǎn)不大操作復(fù)雜，就想講各種打包配置抽離成npm包，可以一鍵修改所有項(xiàng)目的配置

使用知識(shí)點(diǎn)

nodejs
shelljs
webpack node.js API
commander.js
typescript

開始抽離

配置命令

// package.json 中配置bin屬性，定義命令名及執(zhí)行文件
"bin": {
    "pack": "lib/cli.js"
  },
// 配置發(fā)布內(nèi)容 
"files": [
    "scripts",
    "lib"
],

執(zhí)行文件

文件是在命令中執(zhí)行，需要根據(jù)node版本兼容es6判斷自己的命令文件書寫情況，我這里使用node版本為v14.xx.xx, 14開頭的都可以，不兼容import、export，所有我寫的時(shí)候會(huì)用typescript寫，編譯到lib目錄下會(huì)用兼容es5方式

// src/cli.ts 讀取命令

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

// 配置對(duì)象
const webpackConfig = {
	entry: './src/index.js',
	...
};

// 執(zhí)行dev 命令時(shí)調(diào)用方法
const aa = () => {
	// 執(zhí)行打包
	webpack(webpackConfig , (err, stats) => {
		// 處理錯(cuò)誤	
		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);
	    }
		// 打印執(zhí)行成功信息，可以根據(jù)需要自行配置
	    console.log(stats.toString({
	      chunks: false, // 使構(gòu)建過程更靜默無(wú)輸出
	      colors: true, // 在控制臺(tái)展示顏色
	      modules: false,
	      children: false,
	      chunkModules: false
	  	}));
	});
}

const version = require("../package.json").version;
program
  .version(version, "-v, --version")
// 命令后的參數(shù)， 例如 git add , dev 就相當(dāng)于add, 調(diào)用dev命令會(huì)執(zhí)行aa方法
program.command('dev').action(aa);

// 終止參數(shù)處理，命令參數(shù)需要放在地方調(diào)用之前
program.parse(process.argv);

命令執(zhí)行環(huán)境

以下錯(cuò)誤添加 #!/usr/bin/env node 解決

執(zhí)行環(huán)境

process.cwd() 獲取node.js進(jìn)程的當(dāng)前工作目錄，process.chdir改變當(dāng)前工作目錄

const rootDir = process.cwd();
// 將當(dāng)前工作目錄改為node.js進(jìn)程的工作目錄
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/**/*"]
}

發(fā)布

npm run publish