vue2模版编译前期工程搭建

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

一般我们开发js框架或者js库是不会用webpack打包的，webpack是项目打包工具，因为要处理的东西很多，如css,scsss,less,js,vue模版这些东西

我们介绍另外一个打包工具rollup，主要打包的是js(当然也可以打包css)，但是最主要还是打包js，像我们开发这种js库或者js框架的话，大部分都是用这种打包工具，比较轻，vue2、vue3、react的源码也是用的rollup，我们来看下rollup需要那些依赖

packjson.js需要下载这些依赖 前两个babel主要是编译js语法用，用这个babel 需要再配置一个.babelrc文件

• rollup是主要压缩工具
• rollup-plugin-babel需要这个插件来支持rollup支持babel
• rollup-plugin-commonjs rollup本身并不支持文件下面直接找index
• rollup-plugin-serve相当于dev-server

import test from 'test' / /这种就直接找的是test下面的index.js 但是rollup并不支持
// 所以需要下载rollup-plugin-commonjs依赖 就可以支持了

     "scripts": {
        "dev": "rollup -c -w" // rollup相当于webpack -c 相当于-config -w 相当于watch
     },

    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "rollup": "^2.26.11",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-serve": "^1.0.4"

.babelrc文件内容

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

我们也可以看下配置文件和webpack有什么不同rollup配置文件的名字rollup.config.js

import babel from 'rollup-plugin-babel'
import serve from 'rollup-plugin-serve'
import commonjs from 'rollup-plugin-commonjs'

export default {
    input: './src/index.js',
    output: {
        format: 'umd', // 生成包的模式 支持很多模式amd cjs等等很多
        name: 'Vue', // 包的名称 会在全局注册这个name 这样才能在你项目中全局使用
        file: 'dist/umd/vue.js', // 打包目录
        sourcemap: true// 源码映射的问题，方便我们查看问题
    },
    plugins: [
        babel({
            exclude: 'node_modules/**' // babel忽略所有node_modules下的文件
        }),
        serve({ // dev-server
            open: true, // 打开浏览器 // 如果是windows系统需要我们设置默认浏览器
            port: 3000, // 端口号
            contentBase: "", // 变异内容基础目录
            openPage: "/index.html" // 打开的html
        }),
        commonjs() // 执行一下commonjs函数就可以了
    ]
}