返回

Rollup:npm 包开发和发布的可靠助手

前端

使用 Rollup 实现 npm 包开发和发布并不是一件困难的事情。在本篇文章中,我们将通过一个简单的示例,一步一步地引导您完成整个过程,并解决一些新手小白在使用 Rollup 时可能遇到的常见问题,例如如何才能不让 react、react-dom 等基础的第三方库打进包内?如何完成本地测试?

1. 安装 Rollup

npm install --save-dev rollup

2. 初始化一个 npm 包项目

mkdir my-package
cd my-package
npm init -y

3. 创建一个 Rollup 配置文件

在您的项目中创建一个名为 rollup.config.js 的文件,并添加以下内容:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';

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

4. 创建一个源文件

在您的项目中创建一个名为 src/index.js 的文件,并添加以下内容:

function greet(name) {
  return `Hello, ${name}!`;
}

export default greet;

5. 构建您的包

npx rollup -c

6. 测试您的包

npm link
cd node_modules/my-package
npm test

7. 发布您的包

npm publish

现在,您的包已经发布到 npm 上了。您可以使用以下命令来安装它:

npm install my-package

如何才能不让 react、react-dom 等基础的第三方库打进包内?

您可以使用 Rollup 的 external 选项来排除这些库。在您的 rollup.config.js 文件中,添加以下内容:

external: ['react', 'react-dom'],

如何完成本地测试?

您可以使用以下命令来运行本地测试:

npm test

如果您遇到任何问题,请随时在评论区留言。