• Rollup开发环境的搭建(vue)


    前言:

      webpack 是目前最为流行的前端构建工具。同时在前端工程化中,Webpack在开发/编译/构建中都起到了最关键的作用。所以在当下阶段,webpack的基本配置,是每一个前端程序员应当掌握的基本技能。

      webpack 虽然非常火热,但后起之秀 rollup 却慢慢地蚕食着 webpack 的市场,但是为什么还要用rollup呢?如果我们只是写一个 JavaScript 工具或者库,并不需要打包 image、css,也不需要代码拆分等特性,使用 webpack 未免太过繁琐;这时使用 rollup 就非常适合。

    rollup简介:

      rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,打包模块过程中,通过Tree-shaking的方式,利用ES6模块能够静态分析语法树的特性,剔除各模块中最终未被引用到的方法,通过仅保留被调用到的代码块来减小bundle文件大小。(开发应用时使用Wwebpack,开发库时使用Rollup

    一.初始化

    1.新建文件夹,在该文件夹下打开cmd

    $ npm init -y 初始化项目

    操作完成会生成package.json文件,这里面的配置我就不介绍了...

    2.安装依赖,一系列的依赖

    $ npm install @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve cross-env -D

    二.配置文件

    1.新建rollup.config.js文件

    import babel from 'rollup-plugin-babel';
    import serve from 'rollup-plugin-serve';
    
    export default {
        input: './src/index.js', // 引入的文件
        output: {
            format: 'umd', // amd commonjs规范  默认将打包后的结果挂载到window上
            file: 'dist/vue.js', // 打包出的vue.js 文件  new Vue
            name: 'Vue',
            sourcemap: true
        },
        plugins: [
            babel({ // 解析es6 -》 es5
                exclude: "node_modules/**" // 排除文件的操作 glob  
            }),
            serve({ // 开启本地服务
                open: true,
                openPage: '/public/index.html', // 打开的页面
                port: 3000,
                contentBase: ''
            })
        ]
    }

    2.新建.babelrc文件

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

    3.新建src文件,在该文件下index.js

    4.新建public文件,新建index.html文件

    5.配置启动命令

      package.json文件

    {
      "name": "rollup-serve",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "serve": "rollup -c -w" // 监听,热更新
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@babel/core": "^7.10.2",
        "@babel/preset-env": "^7.10.2",
        "cross-env": "^7.0.2",
        "rollup": "^2.16.1",
        "rollup-plugin-babel": "^4.4.0",
        "rollup-plugin-serve": "^1.0.1"
      }
    }

    6.启动命令

    $ npm run serve

    自动生成了dist文件下的vue.js文件,在上面我们配置了,打开端口为3000

    6.在index.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>
        <div id="app"></div>
        <script src="../dist/vue.js"></script>
        <script>
            const vm = new Vue({
                el:'#app',
                data(){
                    return {name: '张三'}
                },
                
                // }
            });
        </script>
    </body>
    </html>

    这样就配置好了

    学习记录一点,今天不学习明天变垃圾...

  • 相关阅读:
    递归算法详解
    树、森林和二叉树的转换
    C++ 类的静态成员详细讲解
    C++内存分配方式详解——堆、栈、自由存储区、全局/静态存储区和常量存储区
    C++中的static关键字的总结
    C/C++中static关键字详解
    配置文件
    Spring Boot 注释
    使用 Spring Boot 快速构建 Spring 框架应用
    Myeclipse快捷键(二)
  • 原文地址:https://www.cnblogs.com/0314dxj/p/13151503.html
走看看 - 开发者的网上家园