【九月打卡】第21天 vite从入门到精通 4-7章

课程名称： Vite 从入门到精通，玩转新时代前端构建法则

课程章节： 4-7 Rollup 常用插件盘点

课程讲师： Jokcy

课程内容：

rollup 常用插件盘点

• commonjs

• Babel

• TypeScript

  //安装
  yarn add @rollup/plugin-typescript typescript tslib -D
  
  // 配置 rollup.config.js
  import ts from "@rollup/plugin-typescript";
  
  export default [
    {
      input: "index.js",
      external: ["react"],
      plugins: [
        ts(),
      ],
      output: [
        {
          file: "dist/index.es.js",
          format: "es",
          name: "Index",
          banner: "/** Hello This is Banner **/",
        },
      ],
    },
  ];
  
  // 使用 
  // testts.ts
  export function myTSFun(name: string) {
    console.log(name);
  }
  
  // index.js
  import { funA } from "a";
  // 引入 ts 文件
  import { myTSFun } from "./testts.ts";
  // 使用 ts 中函数
  myTSFun("name");
  
  funA();
  
  console.log("Hello Rollup12", React.Component, pkg);
  
  //打包
  npx rollup --config .\rollup.config.js
  

• Replace

• Node resolve

• eslint

• image

  //安装
  yarn add @rollup/plugin-image
  
  // 配置 rollup.config.js
  import image from "@rollup/plugin-image";
  
  export default [
    {
      input: "index.js",
      external: ["react"],
      plugins: [
        image(),
      ],
      output: [
        {
          file: "dist/index.es.js",
          format: "es",
          name: "Index",
          banner: "/** Hello This is Banner **/",
        },
      ],
    },
  ];
  
  // 使用
  // index.js
  import url from "./vuelogo.png";
  
  console.log(url);
  
  //打包
  npx rollup --config .\rollup.config.js
  

• strip

  删除全局的 console.log

  //安装
  yarn add @rollup/plugin-strip
  
  // 配置 rollup.config.js
  import strip from "@rollup/plugin-strip";
  
  export default [
    {
      input: "index.js",
      external: ["react"],
      plugins: [
        strip(),
      ],
      output: [
        {
          file: "dist/index.es.js",
          format: "es",
          name: "Index",
          banner: "/** Hello This is Banner **/",
        },
      ],
    },
  ];
  
  //打包
  npx rollup --config .\rollup.config.js
  

• wasm

课程收获：
知道一些常用的 rollup 插件，和使用