手把手教大家实现 npm 包，并发布 npm 仓库，搭建文档（一）

news2024/9/23 1:34:17

我就知道你会点进来看看，吹牛逼的，哈哈，不过呢，我正在朝着这个方向前进，希望大家给我鼓励鼓励，希望点击进来小伙伴点点赞，点点关注。

说实话，写这个项目的目的，从我自己写代码，老是写一些重复性的工具方法，一个项目写一遍，开启另外一个项目又写一遍，实际上是复制一遍，所以就有了这个项目

第一次尝试使用 rollup 来打包自己的 npm 包，来打包自己工作中一些常用的工具方法，假如你想一起贡献代码，可以一起来贡献代码，一起做强做大

好，这篇教程应该会分为好几章节来讲

首先贴下我们的官网

【预览页】

https://kennana.github.io/toolkit-use/

我们的推特

【toolkituse】

https://twitter.com/Toolkituse

我们的github

【toolkit-use】

https://github.com/KenNaNa/toolkit-use

前言

业务线长期的积累产生了许许多多重复性的工具方法，业务功能模块等，我们正好可以用rollup构建一个npm私服工具包，便于后期业务使用，减少重复性的代码编写。

依赖

需要引入依赖

babel 转换器，es6 转成 es5

yarn add @babel/core @babel/cli @babel/preset-env -D

引入 core-js，运行时插件

yarn add core-js @babel/runtime
yarn add @babel/plugin-transform-runtime -D

解析 typescript

yarn add typescript@4.3.5 -D
yarn add @babel/preset-typescript -D

rollup

项目是纯粹的Javascript项目，没有vue、react相关的业务性代码，所以使用rollup进行打包。

yarn add rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-terser rollup-plugin-typescript2 tslib -D

#### 配置`rollup.config.js`

import babel from '@rollup/plugin-babel'; // 引入babel
import commonjs from '@rollup/plugin-commonjs'; // 引入cjs插件
import { nodeResolve } from '@rollup/plugin-node-resolve'; // 引入resolve
import typescript from 'rollup-plugin-typescript2'; // ts
import { terser } from 'rollup-plugin-terser'; // 压缩打包文件

const extensions = ['.js', '.ts'];

const pkg = require('./package.json'); // 从package.json引入

const version = pkg.version; // 项目版本
const license = pkg.license; // 协议
const author = pkg.author; // 作者

// 打包文件的头部声明
const banner =
    '/*!\n' +
    ` * ${pkg.name} v${version}\n` +
    ` * (c) 2020-${new Date().getFullYear()} ${author}\n` +
    ` * Released under the ${license} License.\n` +
    ' */';

module.exports = {
    input: 'src/index.ts',
    output: [
        // 文件输出配置
        {
            file: 'dist/index.umd.js', // 打包后生产的文件位置，及文件名
            format: 'umd',
            name: 'utools', // 包的全局变量名称
            banner
        },
        {
            file: 'dist/index.esm.js', // 打包后生产的文件位置，及文件名
            format: 'esm',
            name: 'utools', // 包的全局变量名称
            banner
        }
    ],
    plugins: [
        nodeResolve({
            extensions,
            modulesOnly: true
        }),
        commonjs(),
        typescript(),
        babel({
            babelHelpers: 'runtime',
            include: 'src/**',
            exclude: 'node_modules/**',
            extensions
        }),
        terser()
    ]
};

在`package,json`中新增

"scripts:" { "build": "rollup -c" }

babel.config.js 配置

module.exports = {
  presets: [
      [
          '@babel/preset-env',
          {
              targets: '> 0.25%, not dead',
              useBuiltIns: 'usage',
              corejs: '3.6.5'
          },
          '@babel/preset-typescript'
      ]
  ],
  plugins: ['@babel/plugin-transform-runtime']
};