Commit 703a8f97 authored by KunQuan's avatar KunQuan

perf: 优化

parent 344e59ad
......@@ -12,29 +12,17 @@
## 实现方式
使用 Rollup 作为打包工具,基本实现 esModule、commonjs、umd 三种打包格式。
## 核心代码
```js
output: [
{
file: "dist/js/main.umd.js",
name: "util-kunquan",
format: "umd",
plugins:[
getBabelOutputPlugin({ presets: ['@babel/preset-env'], allowAllFormats:true })
]
},
{
file: "dist/js/main.es.js",
format: "esm",
},
{
file: "dist/js/main.cjs.js",
format: "cjs",
},
],
```
## 打包
`npm run build`
## 测试
umd:`npm run test:umd`
esModule:`npm run test:es`
commonjs:`npm run test:cjs`
## 参考资料
- [掘金:rollup 打包自己的 js 库](https://juejin.cn/post/7096815349982560264)
- [rollip 官方中文文档](https://www.rollupjs.com/)
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
......@@ -2,17 +2,21 @@
"name": "rollup-test",
"version": "1.0.0",
"description": "",
"main": "./dist/index.cjs",
"module": "./dist/index.mjs",
"main": "./dist/js/main.cjs.js",
"module": "./dist/js/main.es.js",
"browser": "./dist/js/main.umd.js",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs",
"require": "./dist/index.cjs"
"types": "./dist/js/index.d.ts",
"import": "./dist/js/main.es.js",
"require": "./dist/js/main.cjs.js"
}
},
"scripts": {
"build": "rollup -c"
"build": "rollup -c",
"test:es":"http-server -a localhost -o /test/es.html",
"test:umd":"http-server -a localhost -o /test/umd.html",
"test:cjs":"node ./test/cjs.js"
},
"keywords": [],
"author": "KunQuan",
......@@ -25,6 +29,7 @@
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^14.1.0",
"@rollup/plugin-typescript": "^8.5.0",
"http-server": "^14.1.1",
"rollup": "^2.79.1",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-terser": "^7.0.2",
......
export let name:string = 'kunquan';
export let name:string = '坤泉';
/**
......
const { name,getName } = require('../dist/js/main.cjs.js')
console.log(name);
console.log(getName());
\ No newline at end of file
console.log(getName());
\ No newline at end of file
......@@ -5,13 +5,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src=""></script>
</head>
<body>
<script type="module">
import {name, getName} from '../dist/js/main.es.js'
console.log(name);
console.log(getName());
alert(getName())
</script>
</body>
</html>
\ No newline at end of file
......@@ -9,9 +9,10 @@
</head>
<body>
<script>
const { name, getName } = window["util-kunquan"];
console.log(name);
console.log(getName());
const { name, getName } = window["util-kunquan"];
console.log(name);
console.log(getName());
alert(getName())
</script>
</body>
</html>
\ No newline at end of file
......@@ -16,5 +16,5 @@
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"include": ["src", "test/cjs.js"],
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment