在这篇文章中，我们将探索如何使用 rollup 创建支持 commonjs (cjs) 和 ecmascript 模块 (esm) 的 npm 包。
rollup 是一个 javascript 捆绑器，非常适合创建库和包，因为它生成高度优化的代码包，可以在不同环境中轻松使用。
项目结构：
my-npm-package/ ├── src/ │ └── index.js ├── rollup.config.js └── package.json
首先为您的 npm 包创建一个新目录。在目录中，运行命令：
npm init -y
这将生成一个基本的 package.json 文件。
然后安装必要的依赖项：
npm install rollup rollup-plugin-commonjs rollup-plugin-node-resolve
解释依赖关系：
在项目目录中创建一个名为 src 的文件夹。
在 src 中，使用 npm 包中的代码创建一个 index.js 文件。
// src/index.js
function hello(name) {
return `hello, ${name}!`;
}
export { hello };
使用 rollup 配置创建 rollup.config.js 文件。
rollup 有 2 个输出配置选项： 第一个：所有代码都在一个输出文件中。 第二个：使用preservemodules来维护模块结构。
rollup 默认情况下将所有模块合并到一个输出文件中。这意味着您的所有模块（包括您自己的模块及其依赖项）都将合并到一个 javascript 文件中。
//rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
export default [
{
input: 'src/index.js', // arquivo principal de entrada
output: {
file: 'dist/index.cjs.js', // diretório de saída para commonjs
format: 'cjs',
sourcemap: true,
},
plugins: [
resolve(),
commonjs(),
],
},
{
input: 'src/index.js', // arquivo principal de entrada
output: {
file: 'dist/index.esm.js', // diretório de saída para es modules
format: 'esm',
sourcemap: true,
},
plugins: [
resolve(), // resolve módulos de node_modules
commonjs() // converte pacotes commonjs para esmodules
],
},
];
解释设置：
rollup 保留了原始代码的模块结构。项目中的每个模块都将打包在自己的文件中。
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
input: 'src/index.js', // arquivo principal de entrada
output: [
{
dir: 'dist/cjs', // diretório de saída para commonjs
format: 'cjs',
entryfilenames: '[name].js', // mantém o nome do arquivo original
exports: 'auto',
preservemodules: true, // preserva a estrutura dos módulos
preservemodulesroot: 'src', // diretório base que será mantido
},
{
dir: 'dist/esm', // diretório de saída para es modules
format: 'esm',
entryfilenames: '[name].js',
preservemodules: true,
preservemodulesroot: 'src',
}
],
plugins: [
resolve(), // resolve módulos de node_modules
commonjs() // converte pacotes commonjs para esmodules
]
};
解释设置：
使用以下信息更新 package.json 文件：
{
"name": "my-npm-package",
"version": "1.0.0",
"description": "",
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c --watch"
},
"repository": {
"type": "git",
"url": "git+https://github.com/your-username/my-npm-package.git"
},
"author": "",
"license": "mit",
"devdependencies": {
"rollup": "^3.2.1",
"rollup-plugin-commonjs": "^18.0.0",
"rollup-plugin-node-resolve": "^6.3.0"
}
}
解释属性：
运行 npm install 命令来安装依赖项。
运行 npm run build 命令来编译您的包。这将在 dist/.
中生成编译后的文件然后使用 npmpublish 命令将包发布到 npm。
您现在可以在其他项目中使用您创建的 npm 包。
const mypackage = require('my-npm-package');
console.log(mypackage.hello('world'));
import { hello } from 'my-npm-package';
console.log(hello('World'));
使用 rollup 创建具有 commonjs 和 esm 支持的 npm 包非常简单。通过遵循本文中概述的步骤，您可以构建一个灵活的、可重用的包，以满足不同项目的需求。
以上就是使用 Rollup 创建具有 CommonJS 和 ESM 支持的 NPM 包的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
267
收藏
