zhao333
v1.0.0
Published
A plugin that provides myPlugin function
Downloads
3
Readme
要使用 Rollup 打包一个插件,支持 Node.js、ES6 和通过 script 标签使用,并设置一个统一入口文件来实现按照使用环境动态加载打包的文件,可以按照以下步骤进行:
1. 创建项目结构
确保项目结构如下:
my-plugin/
├── dist/
├── src/
│ ├── index.js
│ └── plugin.js
├── .babelrc
├── package.json
├── rollup.config.js
├── index.js
└── README.md
2. 编写插件代码
src/plugin.js
:
export function myPlugin() {
return 'Hello from myPlugin!';
}
src/index.js
:
import { myPlugin } from './plugin';
export { myPlugin };
3. 配置 Babel
创建 .babelrc
文件,配置 Babel:
{
"presets": [
"@babel/preset-env"
]
}
4. 配置 Rollup
创建 rollup.config.js
文件:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import { terser } from '@rollup/plugin-terser';
const env = process.env.BUILD_ENV;
const config = {
input: 'src/index.js',
plugins: [
resolve(),
commonjs(),
babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**'
})
]
};
switch (env) {
case 'cjs':
config.output = {
file: 'dist/my-plugin.cjs.js',
format: 'cjs',
sourcemap: true
};
break;
case 'esm':
config.output = {
file: 'dist/my-plugin.esm.js',
format: 'esm',
sourcemap: true
};
break;
case 'umd':
config.output = [
{
file: 'dist/my-plugin.umd.js',
format: 'umd',
name: 'MyPlugin',
sourcemap: true
},
{
file: 'dist/my-plugin.umd.min.js',
format: 'umd',
name: 'MyPlugin',
plugins: [terser()],
sourcemap: true
}
];
break;
case 'iife':
config.output = [
{
file: 'dist/my-plugin.iife.js',
format: 'iife',
name: 'MyPlugin',
sourcemap: true
},
{
file: 'dist/my-plugin.iife.min.js',
format: 'iife',
name: 'MyPlugin',
plugins: [terser()],
sourcemap: true
}
];
break;
default:
throw new Error('No matching format found. Please specify BUILD_ENV variable.');
}
export default config;
5. 配置 package.json
确保 package.json
中有必要的字段和脚本:
{
"name": "my-plugin",
"version": "1.0.0",
"description": "A plugin that provides myPlugin function",
"main": "dist/my-plugin.cjs.js",
"module": "dist/my-plugin.esm.js",
"browser": "dist/my-plugin.umd.js",
"scripts": {
"build:cjs": "BUILD_ENV=cjs rollup -c",
"build:esm": "BUILD_ENV=esm rollup -c",
"build:umd": "BUILD_ENV=umd rollup -c",
"build:iife": "BUILD_ENV=iife rollup -c",
"build": "npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:iife"
},
"keywords": [
"plugin",
"example"
],
"author": "Your Name",
"license": "MIT",
"devDependencies": {
"@babel/preset-env": "^7.0.0",
"@rollup/plugin-babel": "^5.0.0",
"@rollup/plugin-commonjs": "^15.0.0",
"@rollup/plugin-node-resolve": "^9.0.0",
"@rollup/plugin-terser": "^7.0.0",
"rollup": "^2.0.0"
}
}
6. 创建统一入口文件
在项目根目录下创建统一入口文件 index.js
:
(function(global, factory) {
if (typeof module === "object" && typeof module.exports === "object") {
// Node.js 环境 (CommonJS)
module.exports = factory(require('./dist/my-plugin.cjs.js'));
} else if (typeof define === "function" && define.amd) {
// AMD 模块环境
define(['./dist/my-plugin.esm.js'], factory);
} else {
// 浏览器环境
global.MyPlugin = factory(global.MyPlugin);
}
})(typeof window !== "undefined" ? window : this, function(library) {
return library;
});
7. 编写 README 文件
创建 README.md
文件,提供包的基本信息和使用说明:
# My Plugin
A plugin that provides `myPlugin` function.
## Installation
```bash
npm install my-plugin
Usage
CommonJS
const { myPlugin } = require('my-plugin');
console.log(myPlugin());
ES Module
import { myPlugin } from 'my-plugin';
console.log(myPlugin());
Browser
Include the script in your HTML:
<script src="node_modules/my-plugin/dist/my-plugin.iife.js"></script>
<script>
console.log(MyPlugin.myPlugin());
</script>
### 8. 打包
运行以下命令来生成所有格式的打包文件:
```bash
npm run build
9. 发布到 npm
确保你已经登录到 npm:
npm login
然后发布包:
npm publish
10. 测试发布的包
创建一个新的测试项目来安装和使用你的包:
mkdir test-my-plugin
cd test-my-plugin
npm init -y
npm install my-plugin
创建一个 index.js
文件来测试你的包:
// CommonJS 导入方式
const { myPlugin } = require('my-plugin');
console.log(myPlugin());
或者,如果你使用 ES Module:
// ES Module 导入方式
import { myPlugin } from 'my-plugin';
console.log(myPlugin());
在浏览器环境中测试:
创建一个简单的 HTML 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test My Plugin</title>
</head>
<body>
<script src="node_modules/my-plugin/dist/my-plugin.iife.js"></script>
<script>
console.log(MyPlugin.myPlugin());
</script>
</body>
</html>
使用静态服务器(如 http-server
)来测试这个 HTML 文件:
npm install -g http-server
http-server
然后访问 http://localhost:8080
并查看控制台输出。
总结
通过上述步骤,你可以使用 Rollup 打包一个支持 Node.js、ES6 和通过 script 标签使用的插件,并通过统一入口文件根据运行环境动态加载打包文件。这种方法确保你的插件在不同的环境下都能正常工作,从而提高兼容性和使用方便性。