大前端

主题

搭建 rollup 开发环境 ​

初始化项目,安装依赖 ​

bash
npm install @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve -D
  • rollup: 打包工具
  • rollup-plugin-serve: rollup 的开发服务器, 与 webpack-dev-server 类似
  • @babel/core: babel 核心插件
  • @rollup/plugin-babel: babel 与 rollup 结合起来的桥梁
  • @babel/preset-env: babel 预设

编写 rollup 配置文件rollup-config.mjs ​

js
// rollup.config.js
import serve from "rollup-plugin-serve";
import { babel } from "@rollup/plugin-babel";

export default {
  input: "./src/index.js", // 入口文件路径
  output: {
    // 出口
    file: "lib/vue.js", // 出口文件位置
    format: "umd", // 需要打包成什么模块化规范
    name: "Vue", // umd时候, 暴露的全局变量的名字
    sourcemap: true // 源码映射
  },
  plugins: [
    // Babel配置, babel转译时候忽略了node_module下的所有文件
    babel({
      exclude: "node_modules/**"
    }),

    // 开发服务器配置
    serve({
      open: true,
      port: 10001,
      historyApiFallback: "/public/index.html",
      contentBase: "",
      openPage: "/public/index.html"
    })
  ]
};

配置babel.config.js文件 ​

js
// babel.config.js
module.exports = {
  presets: ["@babel/preset-env"]
};

配置执行脚本 ​

在 package.josn 文件中新增一个 scripts 脚本

json
"scripts": {
  "dev": "rollup -c -w"
},
  • -c: 告诉rollup要使用配置文件
  • -w: 告诉rollup 监听文件变化, 文件变化后重新打包

构建目录结构 ​

txt
├─libs                   # 项目构建后的文件
├─src                    # 项目源代码
│    └─index.js          # 项目入口文件
├─public				 # 静态文件目录
│    ├─index.html        # 调试html文件

public/index.html ​

本地测试时候使用的目录

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="/lib/vue.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.4/vue.js"></script> -->
    <script>
        const vm = new Vue({
            data() {
                return {
                    name: '张三',
                    age: [{ a: 1 }, { b: 2 }],
                }
            }

        })
        console.log(vm._data);

    </script>
</body>

</html>

试运行 ​

执行 npm run dev, 浏览器会自动打开一个新窗口, 表示配置成功