返回
Rollup:npm 包开发和发布的可靠助手
前端
2023-12-10 08:29:59
使用 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
如果您遇到任何问题,请随时在评论区留言。