rollup的搭建环境

最新推荐文章于 2024-10-18 11:53:35 发布

qq_40055200

最新推荐文章于 2024-10-18 11:53:35 发布

阅读量304

点赞数

文章标签：前端 javascript npm

本文链接：https://blog.csdn.net/qq_40055200/article/details/128433502

版权

1.安装

npm init // 初始化
npm i rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev // 安装rollup

2.创建rollup.config.js文件

// rollup默认可以导出一个对象，作为打包的配置文件
import babel from 'rollup-plugin-babel'
export default{
    input: './src/index.js', // 入口
    output:{
        file: './dist/vue.js', // 出口
        name: 'vue', // global vue
        format: 'umd', // esm es6模块 commonjs模块 iife自执行函数    umd
        sourcemap: true // 调试源代码
    },
    // 引入babelrc文件
    plugins:[
        babel({
            exclude: 'node_modules/**'// 排除node_modules下的所有
        })
    ]
}

3.创建rollup文件

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

4.修改package中打包命令且监控rollup文件

{
  "name": "vue2ym",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rollup -cw"  // 监控rollup文件
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.20.7",
    "@babel/preset-env": "^7.20.2",
    "rollup": "^2.79.1",
    "rollup-plugin-babel": "^4.4.0"
  }
}

5.创建src文件夹

export const a = 100;

export default {a: 1}

6.打包，在dist文件夹下创建index文件

<!DOCTYPE html>
<html>
    <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>
        <script src="vue.js"></script>
        <script>
            console.log(vue)
        </script>
    </body>
</html>