搭建vue2的项目

1、新建文件夹

2、用vscode打开

3、新建终端，输入命令，初始化项目 

npm init -y

 4、安装rollup 导包工具，主要打包js库，比webpack打包工具的生成的包要小

Rollup也是一款ESModule打包器，可以将项目中的细小模块打包成整块代码，使得划分的模块可以更好的运行在浏览器环境或者是Nodejs环境。Rollup与Webpack作用非常类似，不过Rollup更为小巧。webpack结合插件可以完成前端工程化的绝大多数工作，而Rollup仅仅是一款ESM打包器，没有其他功能，例如Rollup中并不支持类似HMR这种高级特性。Rollup并不是要与Webpack全面竞争，而是提供一个充分利用ESM各项特性的高效打包器。

Babel 是 JavaScript 编译器：他能让开发者在开发过程中，直接使用各类方言（如 TS、Flow、JSX）或新的语法特性，而不需要考虑运行环境，因为 Babel 可以做到按需转换为低版本支持的代码；Babel 内部原理是将 JS 代码转换为 AST，对 AST 应用各种插件进行处理，最终输出编译后的 JS 代码。babel常见插件

npm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev

 

 5、添加文件、修改配置，rollup配置文件的默认名字

        文件内添加以下配置代码        关于'es' | 'cjs' | 'umd' | 'iife' 相关介绍        前端模块化学习

import babel from 'rollup-plugin-babel'
//rollup ES6 默认导出对象 作为打包配置文件
export default{ 
    //指定打包入口
    input:'./src/index.js',
    output:{
        file:'./dist/vue.js',
        name:'Vue',
        format:'umd',//esm es6模块 commonjs模块 iife自执行函数 umd（commonjs和amd异步模块加载机制）
        sourcemap:'true',//希望可以调试代码
    },
    plugins:[
        babel({
            exclude:'node_modules/**'//排除node_modules所有文件    不需要将es5语法转换成es6
        })
    ]

}