使用rollup来构建vue3+typescript的脚手架大家好,我是muddyrain,一个前端小🔥,热爱前端以及

大家好,我是muddyrain,一个前端小🔥,热爱前端以及热爱开发.‘

Rollup 是一个Javascript模块打包器，可以将小块编辑器编译成大块复杂的代码. 下面我来跟大家讲解下如何使用rollup来进行打包编译vue

安装全局rollup和tsc

npm install rollup tsc -g

初始化一个项目]

新建文件夹

初始化npm

npm init -y

下一步创建一个 rollup.config.js 的文件

新建文件夹 src 并创建一个 index.ts 文件文件内容：

// /src/index.ts
console.log("哈哈哈");

配置rollup

安装所需要的模块

npm install -D rollup-plugin-typescript rollup-plugin-commonjs rollup-plugin-node-resolve

rollup.config.js 文件配置:

import typescript from "rollup-plugin-typescript";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
export default {
  input: "./src/index.ts",
  output: {
    file: "./dist/index.js",
    format: "umd",
  },
  plugins: [
    resolve(), // 查找和打包 node_modules 中进入的第三方模块
    commonjs(), // 将 commonjs 转换成 es6模块给 Rollup进行处理
    typescript(), // 解析TypeScript
  ],
};

填写完配置后修改下 package.json的 scripts脚本：

{
  "name": "muddyrain-rollup-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup --config"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-typescript": "^1.0.1"
  }
}

配置完 rollup 我们来创建一个 typescript的配置

tsc --init

然后生成一个 tsconfig.json 的文件我们来修改一下 - 最基础的默认配置

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "jsx": "preserve",
  }
}

创建完脚本我们来进行运行一次试试

npm run build

看下终端结构:

看下目录结构:

噔噔蹬蹬 -> 看到这个目录结构就是打包成功了.

然后我们使用 node 终端进行调试下我们打包出来的js文件看看可以运行出 '哈哈哈'吗.

ok，运行没问题那就证明我们配置的简单 ts 打包也没问题。

配置 vue

先安装 vue 包

npm install -D vue

目前安装的版本为

"vue": "^3.2.37"

现在 src/ 文件夹下创建一个 App.vue 文件

<script setup lang='ts'>
import { ref } from "vue";
const name = ref<string>("muddyrain");
</script>
<template>
  <span>我的名字是{{ name }}</span>
</template>

然后改下 index.ts 文件

import App from "./App.vue";
import { createApp } from "vue";

createApp(App).mount("#root");

在 dist/ 文件夹下创建一个 index.html作为主导文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

下面填写好文件后再安装一些 vue需要的模块

npm install -D rollup-plugin-vue rollup-plugin-serve rollup-plugin-livereload @rollup/plugin-replace

然后来修改 rollup.config.js 配置

import typescript from "rollup-plugin-typescript";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import vue from "rollup-plugin-vue";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
import replace from "@rollup/plugin-replace";
// 把环境变量 env 存起来
const env = process.env.NODE_ENV;
export default {
  input: "./src/index.ts",
  output: {
    file: "./dist/index.js",
    format: "umd",
  },
  plugins: [
    vue(), // 打包编译解析 vue
    serve("dist"), // 启动服务
    livereload(), // 实时预览刷新
    resolve(), // 查找和打包 node_modules 中进入的第三方模块
    commonjs(), // 将 commonjs 转换成 es6模块给 Rollup进行处理
    typescript(), // 解析TypeScript
    replace({
      preventAssignment: true, // 防止环境变量在代码中被修改
      "process.env.NODE_ENV": JSON.stringify(env),
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: true,
    }),
  ],
};

然后再创建一个脚本 - package.json

{
  "name": "muddyrain-rollup-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup --config",
    "dev": "rollup -cw"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-replace": "^4.0.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-serve": "^2.0.1",
    "rollup-plugin-typescript": "^1.0.1",
    "rollup-plugin-vue": "^6.0.0",
    "vue": "^3.2.37"
  }
}

再安装下 babel的配置 - 在根目录创建一个 .babelrc - 且可以再vue中使用jsx了

// .babelrc
{
  "presets": ["@babel/env", "@babel/preset-typescript"],
  "plugins": ["@vue/babel-plugin-jsx"]
}

然后运行 dev 脚本

npm run dev

终端结果显示:

代表我们运行本地服务成功了他帮我们自动跑了一个 10001的端口服务器我们在浏览器运行一下

和我们写的一样，下面我们实时操作一下试试看看.

2022-08-15 16-51-27.2022-08-15 16_51_58.gif

配置css - sass 和 less 都可以支持

npm install -D rollup-plugin-postcss

import typescript from "rollup-plugin-typescript";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import vue from "rollup-plugin-vue";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
import replace from "@rollup/plugin-replace";
import postcss from "rollup-plugin-postcss";
// 把环境变量 env 存起来
const env = process.env.NODE_ENV;
export default {
  input: "./src/index.ts",
  output: {
    file: "./dist/index.js",
    format: "umd",
  },
  plugins: [
    vue(), // 打包编译解析 vue
    serve("dist"), // 启动服务
    postcss({
      use: ["sass", "less"],
    }),
    livereload(), // 实时预览刷新
    resolve(), // 查找和打包 node_modules 中进入的第三方模块
    commonjs(), // 将 commonjs 转换成 es6模块给 Rollup进行处理
    typescript(), // 解析TypeScript
    replace({
      preventAssignment: true, // 防止环境变量在代码中被修改
      "process.env.NODE_ENV": JSON.stringify(env),
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: true,
    }),
  ],
};

然后在运行我们来看下 css 结果

2022-08-15 17-05-48.2022-08-15 17_07_18.gif

写到这里就已经完结了，感谢大家的阅读！