TypeScript基础篇 - React-Rollup-TS环境实战

最新推荐文章于 2024-08-24 08:22:14 发布

路人i++

最新推荐文章于 2024-08-24 08:22:14 发布

阅读量562

点赞数 1

分类专栏： TypeScript学习 # TypeScript基础篇文章标签： typescript react.js 前端

本文链接：https://blog.csdn.net/qq_35729091/article/details/131810583

版权

TypeScript学习同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

TypeScript基础篇

14 篇文章 0 订阅

订阅专栏

文章介绍了如何结合Rollup、React和TypeScript进行项目构建。通过配置rollup.config.js，使用@rollup/plugin-babel和@rollup/plugin-typescript等插件，对入口文件src/main.tsx进行编译，打包成AMD格式的main.js。同时，package.json中的脚本命令展示了如何运行Rollup打包过程。

摘要由CSDN通过智能技术生成

Rollup+React+TS

scripts/rollup.confog.js

package.js

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。主要是做组件化的，如vite

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"
  },