书诚小驿
Series

1.rollup打包

书诚小驿2024/10/09前端知识库Roolup

前言

一、rollup 组件库环境搭建

1、在桌面输入 cmd

打开命令行工具，创建muying-rollupvue项目

  • 创建muying-rollupvue文件夹
mkdir muying-rollupvue
  • 进入 muying-rollupvue 文件
cd muying-rollupvue/
  • 初始化项目,新建 packjson.json
npm init -y
  • 用 vscode 打开该项目，查看 packjson.json
属性作用
name项目的名称
version项目的版本号
description项目的简短描述
main项目的入口文件，当其他人或工具需要引用这个项目时，会从这个文件开始。
scripts包含了项目的一些脚本命令，可以在命令行中运行
keywords用于描述项目的核心功能、特性或所属领域，以便在 npm 等包管理平台上更容易被搜索到自己的项目
author项目的作者信息，一般会留作者名称和邮箱
license项目的许可证
devDependencies列出在开发过程中需要的依赖，但这些依赖在项目的最终运行环境中通常不是必需的。通常包括构建工具、测试框架、代码格式化工具
dependencies列出了项目运行所必需的依赖包。这些依赖是项目在生产环境中正常运行所必须安装的。
{
  "name": "muying-rollupvue",
  "version": "1.0.0",
  "description": "muying components rollupvue",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "muying <2479377049@qq.com>",
  "license": "ISC"
}

2、安装 rollup 插件

  • 打开终端，安装 rollup 插件

插件可以使用./node_modules/.bin/rollpu进行查看

npm i -D rollup
  • 修改 scripts 脚本命令
  "scripts": {
    "dev":"rollup"
  },
  • 运行 rollup 项目
npm run dev

3、搭建 rollup 环境，打包 rollup

  • 新建/src/index.js 文件
console.log("hello workd");
export default {};
  • 新建开发者环境rollup.config.dev.js

配置 Rollup 以支持源代码映射（source maps）、实时重新加载可能未压缩的、更易于调试的代码。

const path = require("path");
const inputPath = path.resolve(__dirname, "./src/index.js");
const outputPath = path.resolve(__dirname, "./dist/muying-rollupvue.js");
module.exports = {
  input: inputPath,
  output: [
    {
      file: outputPath,
      format: "umd",
      name: "roolupVue",
    },
  ],
};
  • 同时需要在packjson.json修改脚本命令

"dev": "rollup -wc rollup.config.dev.js",其中之所以使用-wc 而不提倡使用-c的区别在于额外的w监听标志。在 Rollup 中，-w 或 --watch 是一个特殊的标志，它告诉 Rollup 以监听模式运行，即当源文件发生变化时自动重新构建项目。

"scripts": {
  "dev": "rollup -wc rollup.config.dev.js"
}
  • 运行脚本命令

运行成功将会显示如下图

npm run dev

image.png

  • 在项目中预览打包效果

新建public/index.html,引入muying-rollupvue.js,然后打开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>muying-rollupvue</title>
    <script src="../dist/muying-rollupvue.js"></script>
  </head>
  <body></body>
</html>

二、模块化标准和多模块打包

1、format 的三种协议

模块作用
umdumd模块可以在浏览器和 Node.js 中使用，表示输出一个 umd 的模块（一个 jsfunction 函数）。
cjscjs(commonjs)是Node.js 默认的模块系统。cjs模块可以被 Node.js 直接 require。(但不支持浏览器上使用)
eses是一种 es6 模块化标准浏览器不能支持,需要在<script type="module"></script>引入浏览器才能支持
  • 输出umd模块

umd这是一个旨在兼容所有模块加载器（AMD, CommonJS, 以及全局变量）的模块定义方式。UMD 模块可以在浏览器和 Node.js 中使用，表示输出一个 umd 的模块（一个 jsfunction 函数）。

const path = require("path");
const inputPath = path.resolve(__dirname, "./src/index.js");
const outputUmdPath = path.resolve(__dirname, "./dist/muying-rollupvue.umd.js");
module.exports = {
  input: inputPath,
  output: [
    {
      file: outputUmdPath,
      format: "umd",
      name: "roolupVue",
    },
  ],
};

在public/index.html文件中引入umd打包模块

<!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>muying-rollupvue</title>
    <script src="../dist/muying-rollupvue.umd.js"></script>
  </head>
  <body></body>
</html>
  • 输出cjs模块

cjs全称 commonjs 是Node.js 默认的模块系统。CJS 模块可以被 Node.js 直接 require。(但不支持浏览器上使用)

const path = require("path");

const inputPath = path.resolve(__dirname, "./src/index.js");
const outputCjsPath = path.resolve(__dirname, "./dist/muying-rollupvue.cjs.js");
module.exports = {
  input: inputPath,
  output: [
    {
      file: outputCjsPath,
      format: "cjs",
      name: "roolupVue",
    },
  ],
};
  • 输出es模块

es 是一种 es6 模块化标准（浏览器不能支持,需要在<script type="module"></script>引入浏览器才能支持） ，在使用时需要给在引入打包模块的public/index.html文件中的<script>标签加上type="module"

const path = require("path");
const inputPath = path.resolve(__dirname, "./src/index.js");
const outputEsPath = path.resolve(__dirname, "./dist/muying-rollupvue.es.js");
module.exports = {
  input: inputPath,
  output: [
    {
      file: outputEsPath,
      format: "es",
      name: "roolupVue",
    },
  ],
};

在public/index.html文件中引入es打包模块

<!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>muying-rollupvue</title>
    <script src="../dist/muying-rollupvue.es.js" type="module"></script>
  </head>
  <body></body>
</html>
  • format 也支持同时输出多个模块
const path = require("path");
const inputPath = path.resolve(__dirname, "./src/index.js");
const outputUmdPath = path.resolve(__dirname, "./dist/muying-rollupvue.umd.js");
const outputCjsPath = path.resolve(__dirname, "./dist/muying-rollupvue.cjs.js");
const outputEsPath = path.resolve(__dirname, "./dist/muying-rollupvue.es.js");
module.exports = {
  input: inputPath,
  output: [
    {
      file: outputUmdPath,
      format: "umd",
      name: "roolupVue",
    },
    {
      file: outputCjsPath,
      format: "cjs",
    },
    {
      file: outputEsPath,
      format: "es",
    },
  ],
};

2、配置resolve插件（为了支持在其他框架上使用）

  • 使用resolve插件

resolve 插件帮助 Rollup 查找并解析 node_modules 中的模块

安装resolve插件

npm i -D @rollup/plugin-node-resolve

在 rollup.config.dev.js 中引入resolve插件

const resolve = require("@rollup/plugin-node-resolve");
module.exports = {
  plugins: [resolve()],
};
  • demo 案例，引入使用sam包，但是sam-test-data 包的 ES 模块构建并没有提供一个默认的导出，所以不能使用浏览器查看，可以使用CommonJS导入,使用require语法,并通过 Node.js 的 node 命令来运行你的脚本。

修改src/index.js内容

const data = require("sam-test-data");
console.log(data.random(), data.a, data.b, "data");
module.exports = {};

执行node src/index.js命令运行查看

  • 使用babel插件，将 es6 转化，通过babel-node src/index.js命令检查语法

使用babel-node src/index.js命令来检查 babel 需要安装的包

npm i -D @babel/node
npm i -D @babel/core

项目中新建.babelrc文件，查找模版babel.config.json写法，并写入

babel 官网文档open in new window

{
  "presets": [["@babel/preset-env"]]
}

安装babel/preset-env

npm i -D @babel/preset-env

这时src/index.js可以写 es6 语法，不过不能直接引入需要使用* as，或者使用解构方法来获取数据

// * as
import * as data from "sam-test-data";
console.log(data.random(), data.a, data.b, "data");
export default random;

// 解构方法
import { random, a, b } from "sam-test-data";
console.log(random(), a, b, "data");
export default random;
  • babel-node调试方法

执行node src/index.js命令运行查看，或者输入babel-node命令转换到babel命令下再执行require('./src/index.js')

node src/index.js
或者执行
babel-node
require('./src/index.js')

离开babel命令

.exit
  • 在 rollup.config.dev.js的 plugins 中如果不使用resolve时

重新执行命令npm run dev,在组件间使用babel-node dist/muying-rollupvue.es.js(umd,cjs 都要可以)是可以查看的，但放在桌面上不行,连接不到外部依赖。所以resolve模块就是为了解决这方面的问题，将源码和第三方模块进行混合打包

plugins: [
  resolve(), //resolve插件帮助Rollup查找并解析node_modules中的模块
];

3、如何使用tree-shaking

Tree shaking 的主要原理是依赖于 ES6 模块系统中的静态结构特性，通过消除 JavaScript 上下文中的未引用代码（即，你的项目中未使用的模块或导出）来优化你的最终打包文件大小的技术。这个术语通常与 ES6 模块和诸如 Webpack、Rollup 这样的现代模块打包器一起使用。

  • 新建src/plugin.js
const a = 1;
const b = 2;
function random(params) {
  console.log(`random`);
}
export { random, a, b };
  • src/index.js修改
import { random, a, b } from "./plugin";
console.log(random(), a, b, "data");
export default random;
  • 执行babel-node调试命令
babel-node src/index.js
  • 当只使用了 random（a,b 未使用时）执行npm run dev命令查看打包内容

会看到 dist 文件夹下将不必要的 a，b 内容也进行了打包，而我们只需要 random 内容

npm run dev
  • 解决此类办法使用tree shaking

修改plugin.js的内容,采用 export 直接导出内容

export const a = 1;
export const b = 2;
export function random(params) {
  console.log(`random`);
}

修改plugin.js的内容

import { random } from "./plugin";
console.log(random(), "random");

4、external属性

有些场景下，虽然我们使用了 resolve 插件，但我们仍然某些库保持外部引用状态，这时我们就需要使用 external 属性，告诉 rollup.]s 哪些是外部的类库,修改 rollup.js 的配置文件。因为一般引用的框文件太大，打包回变慢。所以依旧采用外部引入（如 vue，react）。如在rollup.config.dev.js中加上external属性,将打包的库文件依旧以外部状态引入。

external: ["sam-test-data"];

image.png

5、commonjs插件

  • 使用commonjs

rollup.js 默认不支持 CommonJS 模块,需要将 CommonJS 模块转换为 ES6，这样 Rollup 就可以处理它们。如下面的经典案例，新建src/cjs.js文件

const a = 1;
module.exports = a;

src/index.js中引入cjs.js内容

import data from "./cjs";
console.log(data);
export default data;

输入 babel-node 调试命令,发现可以运行

 babel-node ./src/index.js

输入 npm run serve 打包，发现模块找不到打包错误

npm run dev

这时解决方法是使用commonjs插件

npm i -D @rollup/plugin-commonjs

在rollup.config.dev.js进行引入 commonjs 插件

const commonjs = require("@rollup/plugin-commonjs");
module.exports = {
  plugins: [
    commonjs(), //将CommonJS模块转换为ES6，这样Rollup就可以处理它们
  ],
};
  • commonjs中的tree-shaking

修改src/cjs.js文件

exports.a = 1;
exports.b = 2;

修改src/cjs.js文件

import { a, b } from "./cjs";
console.log(a);
export default a;

6、babel插件

  • 修改src/index.js内容然后运行npm run dev

会发现打包模块并未进行转义，容易在低版本中报错

const a = () => {
  return 3;
};
export default a;
  • 使用babel插件
npm i -D @rollup/plugin-babel

在rollup.config.dev.js进行引入 babel 插件,使其可以在低版本中运行

const babel = require("@rollup/plugin-babel");
module.exports = {
  plugins: [
    babel({
      exclude: "node_modules/**", // 哪些模块不进行babel编译
    }),
  ],
};

7、json插件

  • 引入 packjson.json

修改src/index.js

import pkg from "../package.json";
console.log(pkg, "pkg");

使用babel-node命令调试,并可以进行运行并查看到packjson.json内容

babel-node src/index.js

使用npm run dev命令运行输出，会发现报错（json 文件是不支持模块打包的）

npm run dev
  • 使用json插件

安装 json 插件

npm i -D @rollup/plugin-json

在rollup.config.dev.js进行引入 json 插件,使其可以在低版本中运行

const json = require("@rollup/plugin-json");
module.exports = {
  plugins: [json()],
};

8、terser插件

把打包文件进行最小化压缩

  • 使用terser插件

安装 json 插件

npm i -D @rollup/plugin-terser

由于在开发模式下并不需要进行压缩，所以将rollup.config.dev.js拷贝一份到rollup.config.prod.js中，再在 prod 中使用 terser 插件

const terser = require("@rollup/plugin-terser");
module.exports = {
  plugins: [terser()],
};

在packjson.json中修改 scripts 调试命令,build 是进行打包工具，dev 是开发者监听模式

"scripts": {
    "dev": "rollup -wc rollup.config.dev.js",
    "build": "rollup -c rollup.config.dev.js",
    "build:prod": "rollup -c rollup.config.prod.js"
  },

执行打包和监听模式命令

npm run build
npm run build:prod
npm run dev

当执行npm run build:prod时会发生报错，报错要求我们通过解构方法获取

029082bbacc225ad146a43ef722d20e.png

const { terser } = require("@rollup/plugin-terser");

发现好像不是该问题，找不到具体解决办法，采用了低版本的rollup和terser

npm i -D rollup-plugin-terser@^7.0.2
npm i -D rollup@^2.35.1

如果安装指定版本不行，可以采取直接复制版本到devDependencies,然后删除node_modules,重新安装npm -i

"devDependencies": {
    "@babel/core": "^7.24.4",
    "@babel/node": "^7.23.9",
    "@babel/preset-env": "^7.24.4",
    "@rollup/plugin-babel": "^6.0.4",
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-json": "^6.1.0",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "rollup-plugin-terser": "^7.0.2",
    "rollup": "^2.35.1"
}

然后修改rollup.config.prod.js

const { terser } = require("rollup-plugin-terser");

然后执行压缩打包

npm run build:prod

三、将 rollup 组件打包成 vue 组件库

1、vue插件

  • 安装vue插件
npm i -D rollup i -D rollup-plugin-vue
npm i -D @vue/compiler-sfc
npm i -D rollup-plugin-postcss
npm i -D sass

image.png

  • 使用vue插件

如在rollup.config.dev.js中引入插件，注意commonjs()要放在vue()之后，不然会发生报错，rollup.config.prod.js同样也需要加入

image.png

const resolve = require("@rollup/plugin-node-resolve");
const commonjs = require("@rollup/plugin-commonjs");
const babel = require("@rollup/plugin-babel");
const json = require("@rollup/plugin-json");
const vue = require("rollup-plugin-vue");
const postcss = require("rollup-plugin-postcss");

const path = require("path");

const inputPath = path.resolve(__dirname, "./src/index.js");
const outputUmdPath = path.resolve(__dirname, "./dist/muying-rollupvue.js");
const outputCjsPath = path.resolve(__dirname, "./dist/muying-rollupvue.cjs.js");
const outputEsPath = path.resolve(__dirname, "./dist/muying-rollupvue.es.js");

module.exports = {
  input: inputPath,
  output: [
    {
      file: outputUmdPath,
      format: "umd",
      name: "roolupVue",
    },
    {
      file: outputCjsPath,
      format: "cjs",
    },
    {
      file: outputEsPath,
      format: "es",
    },
  ],
  plugins: [
    vue(),
    resolve(), //resolve插件帮助Rollup查找并解析node_modules中的模块
    commonjs(),
    babel({
      exclude: "node_modules/**", // 哪些模块不进行babel编译
    }),
    json(),
    postcss({
      plugins: [],
    }),
  ],
  external: ["vue"],
};
  • 新建src/TestDemo.vue文件
<template>
  <div class="wrapper">hello world</div>
</template>
<script>
  export default {
    name: "TestDemo",
  };
</script>
<style scoped lang="scss">
  .wrapper {
    width: 100px;
    height: 100px;
    background: orange;
  }
</style>
  • 修改src/index.js内容
import TestDemo from "./TestDemo.vue";
export default function (Vue) {
  Vue.component(TestDemo.name, TestDemo);
}
  • 执行打包命令
npm run build
npm run build:prod

2、解决警告 warn 问题

  • global 警告

    这个警告通常意味着你的代码或某个依赖试图访问一个全局变量，但 Rollup 无法确定这个全局变量的名称。这可能会导致运行时错误，因为 Rollup 无法在构建过程中包含这个全局变量。解决办法是在输出模块安装全局globals:{ 'vue':'vue'}

image.png

output: [
  {
    globals: {
      vue: "vue",
    },
  },
];

3、本地演示使用 vue

  • public/index.js,引入打包的文件和使用 vue.js 在线版本
<!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>muying-rollupvue</title>
    <!-- vue的开发环境 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.4/dist/vue.global.prod.js"></script>
    <script src="../dist/muying-rollupvue.umd.js"></script>
  </head>
  <body>
    <div id="app">{{message}}</div>
    <script>
      Vue.createApp({
        setup() {
          var message = "hello datav!";
          return {
            message,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
  • 使用TestDemo组件
<!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>muying-rollupvue</title>
    <!-- vue的开发环境 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.4/dist/vue.global.prod.js"></script>
    <script src="../dist/muying-rollupvue.umd.js"></script>
  </head>
  <body>
    <div id="app">
      {{message}}
      <test-demo></test-demo>
    </div>
    <script>
      Vue.createApp({
        setup() {
          var message = "hello world";
          return {
            message,
          };
        },
      })
        .use(window.roolupVue)
        .mount("#app");
    </script>
  </body>
</html>

发生了如下报错，vue.global.prod.js:1 TypeError: vue.openBlock is not a function， 解决办法是打开muying-rollupvue.umd.js文件找到factory(global.vue)将其改为factory(global.Vue)

image.png

1、npm link 映射

  • 修改packjson.json中的"main": "index.js"

将输出 umd 模块中'./dist/muying-rollupvue.umd.js写成'./dist/muying-rollupvue.js

"main": "dist/muying-rollupvue.js",
"files": [
    "dist",
    "src"
  ],
"keywords": [
    "vue",
    "muying",
    "rollupvue"
],
  • 映射链接
npm link
  • 由于未在 npm 上线，所以需要再使用该组件时添加依赖

在新的 vue 项目中添加依赖

"dependencies": {
    "muying-rollupvue":"1.0.0"
  },
  • 安装映射链接

会在node_modules中出现muying-rollupvue打包的库

npm link muying-rollupvue
  • 在新项目中引入打包模块

.use() 是一个全局 API，用于安装 Vue 插件

import datas from "muying-rollupvue";
createApp(Home).use(datas).mount("#app");
  • 执行npm run serve命令发现报错，原是muying-rollupvue需要进行eslint初始化

image.png

  • 在muying-rollupvue项目中安装eslint依赖

安装 eslint，事先执行版本，删除node_modules，重新安装

"devDependencies": {
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^9.25.0",
  }

执行 eslint 命令

./node_modules/.bin/eslint --init

选择第一个To check syntax only仅仅检查语法，空格勾选，回车确认

选择模块第一个 JavaScript modules (import/export)

选择框架 Vue.js,

是否使用 TypeScript 语法，no

在什么环境下运行代码，选择Browser浏览器

format 输出模块JavaScript

它询问您是否希望现在安装这些依赖项，选择Yes

然后会自动生成.eslintrc.js文件,在.eslintrc.js文件中进行配置和修改

/*
ESLint 是一个开源的 JavaScript 代码检查工具，
用于识别和报告代码模式，这些模式可能是错误、可能的问题，
或者只是代码风格的约定。
*/
module.exports = {
  /* env: 这个对象定义了代码运行的环境。 */
  env: {
    browser: true, //浏览器（browser）
    es2020: true,
  },
  // extends: 这个属性指定了继承的基础配置
  extends: "plugin:vue/essential",
  //parserOptions: 这个对象定义了 ESLint 解析器的选项
  parserOptions: {
    ecmaVersion: 12, //ecmaVersion 设置为 12，意味着解析器将支持 ECMAScript 2021（即 ES12）的特性
    sourceType: "module", //sourceType 设置为 module，表明代码将使用 ES6 模块语法。
  },
  /* plugins: 这个数组列出了 ESLint 使用的插件 */
  plugins: ["vue"],
  rules: {},
};
  • 在packjson.json中scripts中加上eslint检查，

这时可以解决之前打包模块的 vue 大小写问题，当 eslint 检查不通过的时候，是不允许 build

"scripts": {
    "dev": "rollup -wc rollup.config.dev.js",
    "build": "eslint ./src && rollup -c rollup.config.dev.js",
    "build:prod": "eslint ./src && rollup -c rollup.config.prod.js",
    "lint": "eslint ./src"
},

通过 npm run lint进行 eslint 检查

npm run lint

然后执行npm run build和npm run build:prod进行打包，发现muying-rollupvue.js中的global.vue未变，依旧需要手动更改,解决办法是在rollup.config.dev.js和rollup.config.prod.js中，将协议模块中 global 改变成大写Vue。可以给三方模块都添上

globals: {
     'vue': 'Vue'
}

重新映射 link

npm link

在新的项目 vue 中进行 link

npm link muying-rollupvue

在新的 vue 项目中就可以直接使用test-demo组件

五、按需加载

1、muying-rollupvue

  • 新建src/components/TestDemo1,在其文件夹下新建index.js和TestDemo1

  • TestDemo1/index.js

import TestDemo1 from "./TestDemo1.vue";
export default function (Vue) {
  Vue.component(TestDemo1.name, TestDemo1);
}
  • TestDemo1/TestDemo1.vue
<template>
  <div class="wrapper">
    <div class="box1">{{ message }}</div>
  </div>
</template>
<script>
  export default {
    name: "TestDemo1",
    setup() {
      const message = "hello world";
      return {
        message,
      };
    },
  };
</script>
<style scoped lang="scss">
  .wrapper {
    width: 100px;
    height: 100px;
    background: orange;
    .box1 {
      background: aquamarine;
    }
  }
</style>
  • 其他组件类似(TestDemo2)，然后在src/index.js下导出
import TestDemo1 from "./components/TestDemo1/index";
import TestDemo2 from "./components/TestDemo2/index";
export default function (Vue) {
  Vue.use(TestDemo1);
  Vue.use(TestDemo2);
}

2、在新建的 vue 项目中 link 组件，

  • 在src/main.js中引入(全部加载muying-rollupvue组件内容)
import { createApp } from "vue";
import App from "./App.vue";
import datas from "muying-rollupvue";

createApp(App).use(datas).mount("#app");

3、按需加载组件内容,在main.js中

import { createApp } from "vue";
import App from "./App.vue";
// 按需加载找到指定需要的组件
import TestDemo1 from "muying-rollupvue/src/components/TestDemo1/index";
createApp(App).use(TestDemo1).mount("#app");

六、vue2 组件库兼容方案

1、新建 vue2 项目

  • package.json中写入库的版本
"dependencies": {
    "muying-rollupvue":"^1.0.0"
  },
  • link 组件
npm link muying-rollupvue
  • 在src/main.js中使用组件
import Vue from "vue";
import App from "./App.vue";
import datav from "muying-rollupvue";

Vue.config.productionTip = false;
Vue.use(datav);

new Vue({
  render: (h) => h(App),
}).$mount("#app");
  • 在 App.vue 中使用<test-demo1>组件

使用 vue3 组件在 vue2 中会报错，不兼容

image.png

<test-demo1></test-demo1>

2、降低muying-rollupvue版本到 vue2

  • 在package.json中降低 vue 版本和去掉 compiler-sfc,

image.png

"rollup-plugin-vue": "^5.0.0",
  • 重新安装依赖
npm i
  • 安装新的 vue 插件(@^2.6.11)
npm i -D vue-template-compiler

  • 将src/components里的内容全部改成 vue2 语法

  • 重新打包、npm link，重新引用组件就可以运行了

  • vue2 组件可以被 vue3 项目使用，但 vue2 组件中使用不了 vue3 语法

vue2 的过滤器语法在 vue3 项目中是不能使用的

<template>
  <div class="wrapper">{{ message | add }}</div>
</template>

<script>
  export default {
    name: "TestDemo3",
    filters: {
      add(v) {
        return v + "!";
      },
    },
    data() {
      return {
        message: "hello world",
      };
    },
  };
</script>
<style>
  .wrapper {
    width: 100px;
    height: 100px;
    background: orange;
  }
</style>
最后更新时间' 2025/1/3 14:16:58
目录