目录
Rollup+React+TS
scripts/rollup.confog.js
package.js文章来源:https://www.toymoban.com/news/detail-605210.html
Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。主要是做组件化的,如vite文章来源地址https://www.toymoban.com/news/detail-605210.html
Rollup+React+TS
scripts/rollup.confog.js
// 安装 npm install @rollup/plugin-babel -D
import babel from '@rollup/plugin-babel'
import path from 'path'
// babel是JS的编译器生态
// 安装插件rollup-plugin-typescript @babel/core @babel/preset-react
// npm install rollup-plugin-typescript @babel/core @babel/preset-react -D
import typescript from 'rollup-plugin-typescript' // 插件
export default [{
// 定义入口文件
input: path.resolve(__dirname, '../src/main.tsx'),
output: {
file: 'build/main.js',// 打包后地址
format: 'amd',// 打包最后格式,iife函数执行的方式,依赖注入顺序可能有误
name: 'main'
},
plugins: [// 定义插件
typescript(),
babel({// 处理react的
presets: ["@babel/preset-react"]
})
]
},
// {}// 可以打包多个模块,
]
package.js
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack serve --config scripts/webpack.config.js",
// rollup 打包
"rollup:dev": "rollup -c --config scripts/rollup.config.js"
},
到了这里,关于TypeScript基础篇 - React-Rollup-TS环境实战的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!