發(fā)布一個自己的npm包之wxh-tools

smartlion 發(fā)布于2019-08-26 10:30 / 1376人閱讀

摘要：工作中經(jīng)常重復(fù)寫一些方法整理起來托管到倉庫中搭建一個包每次使用時按需下載打包成一個文件方便使用項目地址地址工具截圖項目目錄執(zhí)行包命令所有下方法列表由創(chuàng)建打包時使用的配置打包目錄臨時目錄，用于存放從下載到本地的資源存放

工作中經(jīng)常重復(fù)寫一些方法, 整理起來托管到 GitHub倉庫中 ,
搭建一個npm包, 每次使用時, 按需下載打包成一個文件, 方便使用;

項目地址

NPM地址: https://www.npmjs.com/package/wxh-tools;

GITHUB: https://github.com/Wxh16144/wxh-tools;

工具截圖:

項目目錄

bin

www // 執(zhí)行包命令

config

methods_list.json // 所有/src/tools/下方法列表, 由create_methods_list.js 創(chuàng)建

webpack.config.js // 打包時使用的webpack配置

dist // 打包目錄

reoisutiry // 臨時目錄，用于存放從git下載到本地的資源

src

tools // 存放平常使用的方法(全部)

utils

create_file_by_user_select.js // 根據(jù)用戶選擇的方法，創(chuàng)建文件夾

get_json_file.js // 讀取json文件內(nèi)容并序列化

read_dir_file.js // 讀取某一個目錄下的所有文件

webpack_build.js // webpack配置

get.js // 從git上下載文件

index.js // 獲取用戶選擇config

main.js // 入口文件

.babelrc

create_methods_list.js // 讀取src/tools/所有方法并生成文件

安裝依賴

  npm install @babel/cli@7.5.5  @babel/core@7.5.5  @babel/preset-env@7.5.5  babel-loader@8.0.0-beta.0  core-js@3.1.4  download@7.1.0  inquirer@6.5.0  ora@3.4.0  rimraf@2.6.3  shelljs@0.8.3  webpack@4.37.0  webpack-cli@3.3.6 --save

列舉出來的npm 語句太長, 為了偷懶我也使用了 src/utils/get_json_file.js 方法;

Demo:

  const method = require("./src/utils/get_json_file");
  const json_file = method("./package.json");
  const dep = json_file.dependencies;
  const res = Object.keys(dep).reduce((str, key) => {
    return `${str}  ${key}@${(dep[key]).slice(1)}`
  }, "")
  console.log(res);
  // @babel/cli@7.5.5  @babel/core@7.5.5  @babel/preset-env@7.5.5  babel-loader@8.0.0-beta.0  core-js@3.1.4  download@7.1.0  inquirer@6.5.0  ora@3.4.0  rimraf@2.6.3  shelljs@0.8.3  webpack@4.37.0  webpack-cli@3.3.6

工具封裝

get_json_file.js

讀取json文件, 并且序列化

  const fs = require("fs");
  /**
  *讀取*.JSON文件,并序列化返回
  *
  * @param {*} filepath 文件地址
  * @returns 文件內(nèi)容
  */
  module.exports = (filepath) => {
    if (!filepath) return "";
    const _Json = fs.readFileSync(filepath);
    return JSON.parse(_Json);
  };

read_dir_file.js

讀取某一個目錄下的所有文件(不包括文件夾, 不進行遞歸)

  const path = require("path");
  const path_join = path.join;
  const fs = require("fs");

  /**
  *獲取目錄下的所有文件(不包括文件夾)
  *
  * @param {*} [dir=path_join(__dirname)] 目錄
  * @param {*} [reg=/./] 正則表達死
  * @returns 文件數(shù)組
  */
  module.exports = (dir = path_join(__dirname), reg = /./) => {
    // 讀取所有的文件
    let files = fs.readdirSync(dir);
    return files.reduce((arr, item) => {
      // 獲取文件路徑
      let fPath = path_join(dir, item);
      // 讀取
      let stat = fs.statSync(fPath);
      // 判斷是否為文件
      let isFile = stat.isFile();
      // 過濾正則表達式條件
      return isFile && reg.test(item) ? [...arr, item] : arr
    }, []);
  };

get.js

從遠程github倉庫下載文件
使用download下載文件包; download npm 地址;

const path = require("path");
const path_join = path.join;
const fs = require("fs");
const download = require("download");

/**
 *從遠程github倉庫下載文件
 *
 * @param {array} files 文件名
 * @param {string} [savePath=path_join(__dirname, "../repository")] 文件下載保存地址
 * @returns Promise
 */
module.exports = (files, savePath = path_join(__dirname, "../repository")) => {
  const URL = "https://raw.githubusercontent.com/Wxh16144/wxh-tools/master/";
  return Promise.all((Array.isArray(files) ? files : [])
    .map(file_name => download(URL + file_name, savePath)));
};

工具準(zhǔn)備完成, 開始構(gòu)建CONFIG（index.js）

使用inquirer控制臺交互包; inquirer npm 地址;
使用ora加載動畫包; ora npm 地址;

引入所需模塊

// 路徑處理
const path = require("path");
const path_join = path.join;

// 控制臺交互
const inquirer = require("inquirer");
const prompt = inquirer.createPromptModule();
// 加載動畫
const ora = require("ora");

// 獲取下載文件
const download_methods_list = require("./get");

控制臺交互, 一個Promise數(shù)組;

// 詢問需要添加的方法
const Ask_the_task = [
  // 詢問用戶需要使用那些方法
  async () => {
    // 添加動畫
    const spinner = ora("正在獲取所有方法列表...").start();
    // 下載所有方法列表
    const res = await download_methods_list(["config/methods_list.json"]);
    // 讀取方法列表
    const methods_list = require("./utils/get_json_file")(path_join(__dirname, "../repository/methods_list.json"));
    // 停止動畫
    spinner.stop();
    const ALL_TOOLS_SERVER = (methods_list.methods_list || []).map(filename => {
      return filename.replace(/.js$/, "");
    });
    // 創(chuàng)建問題
    return prompt({
      type: "checkbox",
      name: "tools_key",
      message: "請選擇您所需要的方法",
      default: [],
      choices: ALL_TOOLS_SERVER
    })
  },
  // 詢問用戶保存名字
  () => prompt({
    type: "input",
    name: "save_file_name",
    message: "保存文件名",
    default: "utils.js",
  }),
  // 詢問用戶是否需要打包
  () => prompt({
    type: "confirm",
    name: "is_build",
    message: "是否需要使用webpack打包",
    default: true
  }),
];

從上往下詢問問題
并合并用戶選擇的CONFIG, 導(dǎo)出執(zhí)行方法

/**
 *循環(huán)提出詢問
 *
 * @returns 用戶配置
 */
const task = async () => {
  const config = {};
  for (const fn of Ask_the_task) {
    const P = fn();
    const res = await P;
    Object.assign(config, res)
  }
  return config;
};

// 導(dǎo)出提問方法
module.exports = task;

根據(jù)用戶選擇下載對應(yīng)方法 (main.js)

使用rimraf刪除文件包; rimraf npm 地址;

加載模塊

const path = require("path");
const path_join = path.join;
const fs = require("fs");

// 刪除文件
const rimraf = require("rimraf");

// 獲取下載文件
const download_methods_list = require("./get");

// 加載動畫
const ora = require("ora");

// webpack 打包
const webpack_build_function = require("./utils/webpack_build");

// 交互問題
const task = require("./index");

詢問用戶, 下載方法到本地, 合并方法文件, 使用webpack 打包

// 所有問題
const task = require("./index");
(async function () {
  const CONFIG = await task();
  // 獲取用戶配置
  const { tools_key = [], is_build = true } = CONFIG;
  // 臨時目錄
  const DIRECTORY = path_join(__dirname, "../temporary/");
  rimraf.sync(DIRECTORY);
  // 添加下載動畫
  const download_spinner = ora("正在下載所選方法數(shù)據(jù)...").start();
  // 根據(jù)所選方法收集
  // 下載所有方法列表
  const load_select_methods = await download_methods_list(
    tools_key.map(key => `src/tools/${key}.js`),
    path_join(__dirname, "../temporary")
  );
  // 下載完成
  download_spinner.succeed("所需方法下載完成");
  // 添加創(chuàng)建文件動畫
  const create_file_spinner = ora("創(chuàng)建并生成文件中...").start();
  const create_file_by_user_select = require("./utils/create_file_by_user_select");
  const create_file = await create_file_by_user_select(CONFIG);
  create_file_spinner.succeed("創(chuàng)建完成");

  // 添加打包動畫
  const build_spinner = ora("處理文件中...").start();
  const build_res = await webpack_build_function(CONFIG);
  build_spinner.succeed(`處理成功,地址:${build_res}`);
}());

創(chuàng)建合并文件(create_file_by_user_select.js)

處理 github 下載到本地 temporary 目錄的方法;
打包好的文件會在 window 有一個全局的方法集為 WT

const path = require("path");
const path_join = path.join;
const fs = require("fs");

/**
 *創(chuàng)建合并文件
 *
 * @param {*} CONFIG 用戶輸入配置
 */
module.exports = async CONFIG => {
  // 獲取臨時目錄路徑
  const DIRECTORY = path_join(__dirname, "../../temporary/");
  const { tools_key = [] } = CONFIG;
  let javascript = "";
  tools_key.forEach(fileN => {
    // 逐個導(dǎo)入方法
    javascript += `import ${fileN}  from "./${fileN}.js";
    `
  });
  const myexport = tools_key.map(String).join(",");
  // 綁到window上
  // 導(dǎo)出方法
  javascript += `
  window.WT = { ${myexport} };
  export { ${myexport} };`
  // 寫到臨時目錄
  fs.writeFileSync(path_join(DIRECTORY, "utils.js"), javascript);
}

使用webpack打包(webpack_build.js)

傳入用戶CONFIG配置; 通過 --build 標(biāo)識是否使用@babel/preset-env打包;
使用shell下載文件包; shell npm 地址;
這里有個方法 process.cwd() 是獲取用戶執(zhí)行方法的目錄; 使用這個作為webpack打包出口;

執(zhí)行webpack 打包, 使用配置config/webpack.config.js文件

const path = require("path");
const path_join = path.join;
const fs = require("fs");
const shell = require("shelljs");


/**
 *檢查用戶輸入的文件名是否合法
 *
 * @param {*} filename 文件名
 * @returns 文件名
 */
const get_File_Name = filename => {
  if (/.js$/.test(filename)) {
    return filename
  } else {
    return filename + ".js"
  }
}

/**
 *使用webpack打包文件
 *
 * @param {*} CONFIG 用戶配置
 * @returns 結(jié)果
 */
module.exports = async CONFIG => {
  // 配置參數(shù)
  const { tools_key = [], is_build = true, save_file_name } = CONFIG;
  // 獲取到webpack配置地址
  const CONFIG_PATH = path_join(__dirname, "../../config/");
  // 打包輸出路徑地址 // 用戶打開控制臺的地址
  const OUTPUT_PATH = path_join(process.cwd(), get_File_Name(save_file_name));
  // 拼接 webpack 命令行
  const CMD = `npx webpack ${is_build ? "--build" : ""}  --output ${OUTPUT_PATH}`;
  // 返回異步結(jié)果(shells是同步的)
  return new Promise((resovle, reject) => {
    shell.cd(CONFIG_PATH);
    const EXEC_RES = shell.exec(CMD);
    if (EXEC_RES.code === 0) {
      resovle(OUTPUT_PATH); //返回成功地址
    } else {
      reject(EXEC_RES); //失敗
    }
  });
};

配置文件

.babellrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        },
        "modules": "umd",
        "useBuiltIns": "usage",
        "corejs": 3,
      }
    ]
  ],
  "plugins": [],
  "ignore": [
    "src/tools"
  ]
}

config/webpack.config.js

const path = require("path");
// 判斷是否有 --build 標(biāo)識
const IS_BUILD = (Array.isArray(process.argv) ?process.argv : []).includes("--build");
// babel
const BABEL_BUILD = {
  test: /.js$/,
  exclude: /(node_modules|bower_components)/,//排除掉node_module目錄
  use: {
    loader: "babel-loader",
    options: {
      presets: [
        ["@babel/preset-env", {
          modules:false,
          useBuiltIns: "usage",
          corejs: 3,
        }]
      ],
      plugins: [],
    }
  }
};
module.exports = {
  entry: path.resolve(__dirname, "../temporary/utils.js"),
  mode: "production",
  output: {
    filename: "utils.js",
    path: path.resolve(__dirname, "../temporary/dist")
  },
  module: {
    rules: [
      (IS_BUILD ? BABEL_BUILD : {}) // --build
    ]
  }
};

bin/www

#! /usr/bin/env node
require("../src/main.js");

發(fā)布到NPM

先修改package.json 文件, 添加 bin 屬性
代表全局方法名為: wxh

"bin": {
  "wxh": "./bin/www"
},

登錄自己的npm賬號

npm adduser

推送包到npm倉庫中

npm publish

推送npm包注意事項

檢查自己的包在npm庫中有沒有重命名

每一次推送包都要修改package.json 的 version 字段

寫在最后

到這里我們整個包都已經(jīng)寫好了, 只需要安裝到全局, 我們就可以使用了;
之后的日常維護, 我們只需要在 src/tools 目錄下添加一個個方法就好了;
偷懶寫一個方法 create_methods_list.js;
方法根據(jù) /src/tools目錄下的方法文件, 生成 methods_list.json 文件到config目錄;

const fs = require("fs");
const path = require("path");
const path_join = path.join;
const read_dir_file = require("./src/utils/read_dir_file");
// 讀取
const fileArr = read_dir_file(path_join(__dirname, "./src/tools"));
fs.writeFileSync(path_join(__dirname, "./config/methods_list.json"),
  JSON.stringify({ methods_list: fileArr })
);

云服務(wù)器 GPU云服務(wù)器怎么發(fā)布自己的網(wǎng)站怎么搭建一個自己的視頻網(wǎng)站如何搭建一個自己的服務(wù)器怎么在云服務(wù)器上發(fā)布自己的aspx網(wǎng)站

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106295.html

發(fā)表評論

登陸后可評論

0條評論

smartlion

男|高級講師

我要關(guān)注我要私信

TA的文章

C++基礎(chǔ)語法（五）繼承——萬字總結(jié)，干貨滿滿

閱讀 3010·2021-10-12 10:12
虛擬主機的ip如何獲取-怎樣查看自己的虛擬主機ip地址？

閱讀 3060·2021-09-22 16:04
CSS<背景>

閱讀 3294·2019-08-30 15:54
這份優(yōu)化清單，你做了哪些？

閱讀 2607·2019-08-29 16:59
學(xué)習(xí)小結(jié) | Vue+TweenMax做一個溫度計

閱讀 2914·2019-08-29 16:08
氪信生活小程序Demo

閱讀 874·2019-08-29 11:20
CSS基礎(chǔ)教程

閱讀 3497·2019-08-28 18:08
高性能現(xiàn)代瀏覽器超大wav音頻的波形繪制方案

閱讀 653·2019-08-26 13:43

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

發(fā)布一個自己的npm包之wxh-tools

相關(guān)文章

開發(fā)基于 Laravel 項目自動化部署的擴展包之 laravel-unideploy

發(fā)表評論

0條評論

smartlion

男|高級講師

TA的文章

C++基礎(chǔ)語法（五）繼承——萬字總結(jié)，干貨滿滿

虛擬主機的ip如何獲取-怎樣查看自己的虛擬主機ip地址？

CSS<背景>

這份優(yōu)化清單，你做了哪些？

學(xué)習(xí)小結(jié) | Vue+TweenMax做一個溫度計

氪信生活小程序Demo

CSS基礎(chǔ)教程

高性能現(xiàn)代瀏覽器超大wav音頻的波形繪制方案

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

發(fā)布一個自己的npm包之wxh-tools

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！