发布一个 npm 包，构建自己的第三方库

发布一个npm包，构建自己的第三方库

前言

小生在需要发布自己npm包时，见网上诸多教程，皆无法满足所思需求；不是太简单，就是缺三少四，故前往各大厂商之GitHub，耐心翻阅其源码，始有心得；特此做博客以记，与诸君共勉。

如果你需要进行快速搭建自己的第三方库，请移步:npm-plugins-building-shell 或者 借用shell，快速搭建一个npm插件库。

申请一个npm 账号 以及创建好相关 github 项目

前往申请 npm 账号： https://www.npmjs.com/

此处本人创建的 github 项目名字为my-npm-libs，你需要另外重新起个名字。

本地创建 npm 项目

我们需要创建自己npm项目。

mkdir my-npm-libs # 创建文件夹，注意此处的名字和你上面创建的GitHub项目名称保持一致
cd my-npm-libs # 进入文件
# 此处使用 -y 可以跳过后面让你填写内容操作，所有内容都是用默认值就好，有需要的话回头可以在package.json 文件中进行修改
npm init -y # 默认配置

这里我们选择的是默认配置npm init -y，如果，你需要进行更详细的配置请使用：

npm init

使用npm init的结果如图：

查看npm init文档，以查看更多详细内容。

npm 项目目录

mkdir examples lib src test # 创建所需目录
touch .babelrc .gitignore README.md # 创建所需文件
touch examples/index.html src/index.js test/index.js

目录如下：

.
├── examples/                         // 目录: 放置案例文件
│   ├── index.html                    // 文件: 案例运行结果
├── lib/                              // 目录: 放置 script 引用的文件
├── src/                              // 目录: 库目录
│   ├── index.js                      // 文件: 库内容
├── test/                             // 目录: 放置单元测试文件
│   ├── index.js                      // 文件: 测试内容
.babelrc
.gitignore
package.json
README.md

相关配置(请按照顺序进行配置)

src/index.js 库内容

我们的包需要支持如下三种引用方式：

import引用

import ... from '...'

require引用

const ... = require('...')

标签引用

<script src="..."></script>

此处我们使用自己写的，获取数据类型的方法：

// 获取数据类型
(function (root, globalName, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD:
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    // Node:
    module.exports = factory();
    // Use module export as simulated ES6 default export:(将模块导出用作模拟ES6默认导出)
    module.exports.default = module.exports;
  } else {
    // Browser:
    window[globalName] = factory();
  }
}(this, 'dataType', function () {
  'use strict';

  return function dataType (data) {
    return ({}).toString.call(data).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
  }
}));

babel配置

由于，目前绝大部分的浏览器只支持ES5，故此我们需要把ES5以上的语法转换为ES5，我们需要引用babel。不了解babel的请移步babel 官网。

如果你不需要进行语法转换则跳过此babel配置步骤。

我们需要配置babel，这里由于babel的更新babel的配置基本分为两类：
1.babel6.X 以及其以下版本
2.babel7.X 以及其以上版本

babel6.X以及其以下版本的配置

安装 Babel 命令行工具（babel-cli）以及一种 Babel preset：

npm install --save-dev babel-cli babel-preset-env

创建一个 .babelrc 文件（或者使用你的 package.json 文件)：我们上面已经创建过了的话，此处不必再进行创建。

{
   
  "presets": ["env"]
}

由于 Babel 只进行语法转换（如箭头函数），你可以使用 babel-polyfill 来支持新的全局变量，如 Promise 或新的原生方法，如 String.padStart（left-pad）。它使用了 core-js 和 regenerator 。
安装 babel-polyfill：

npm install --save-dev babel-polyfill

运行此命令将所有代码从 src 目录编译到 lib：