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

目录

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