Build a vue2 project

1. Create a new folder

2. Open with vscode

3. Create a new terminal, enter commands, and initialize the project 

npm init -y

 4. Install the rollup package guide tool, which mainly packages the js library, which is smaller than the package generated by the webpack package tool

Rollup is also an ESModule packager, which can package small modules in the project into a whole block of code, so that the divided modules can run better in the browser environment or Nodejs environment. Rollup is very similar to Webpack, but Rollup is smaller. Webpack combined with plug-ins can complete most of the work of front-end engineering, while Rollup is just an ESM packager without other functions. For example, Rollup does not support advanced features like HMR. Rollup is not trying to fully compete with Webpack, but to provide an efficient bundler that takes full advantage of the features of ESM.

Babel is a JavaScript compiler : it allows developers to directly use various dialects (such as TS, Flow, JSX) or new grammatical features during the development process, regardless of the operating environment, because Babel can be converted on demand Code supported by lower versions; the internal principle of Babel is to convert JS code into AST , apply various plug-ins to AST, and finally output compiled JS code. babel common plugins

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

 

 5. Add files, modify configuration, default name of rollup configuration file

        Add the following configuration code in the file         about 'es' | 'cjs' | 'umd' | 'iife' related introduction         front-end modular learning

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
        })
    ]

}