为 nodejs 与浏览器环境开发通用 npm 包的指南

简介

随着前端工程化的发展，越来越多的项目需要将代码打包成可复用的npm包，以便在不同的项目中使用。而rollupjs是一个非常受欢迎的打包工具，它可以将代码模块化，并根据不同的目标环境生成相应的代码包。

rollupjs 的特点

• 模块化：rollupjs可以将代码模块化，便于代码复用。
• 按需加载：rollupjs可以根据需要加载代码模块，减少了代码的体积。
• 代码压缩：rollupjs可以对代码进行压缩，减少了代码的体积。
• 支持多种目标环境：rollupjs可以根据不同的目标环境生成相应的代码包，包括nodejs、浏览器、ES模块等。

开发通用 npm 包

环境搭建

首先，需要安装nodejs和npm。然后，使用npm安装rollupjs和相关的插件。

npm install -g rollup
npm install -D rollup-plugin-node-resolve
npm install -D rollup-plugin-commonjs
npm install -D rollup-plugin-typescript

代码结构

├── package.json
├── src
│   ├── index.js
│   ├── index.ts
├── dist
│   ├── index.js
│   ├── index.min.js
├── rollup.config.js

rollup.config.js 配置文件

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import typescript from 'rollup-plugin-typescript';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'cjs'
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript()
  ]
};

打包

rollup -c

发布

npm publish

工程样板

提供了typescript版本的样板，便于更好的工程化。

├── package.json
├── src
│   ├── index.ts
├── dist
│   ├── index.js
│   ├── index.min.js
├── rollup.config.js
├── tsconfig.json

rollup.config.js 配置文件

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import typescript from 'rollup-plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/index.js',
    format: 'cjs'
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript()
  ]
};

打包

rollup -c

发布

npm publish

结语

本文介绍了如何使用rollupjs为nodejs和浏览器环境开发一个通用npm包，并提供了一个工程样板，希望对大家有所帮助。