环境搭建

本节目标：理解“环境搭建”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。

一、建立根目录
**如****vue2-stage**

二、创建package.json来管理目录
**npm -init -y**

**三、安装基本包，创建****rollup****环境对资源进行打包**
npm install

@babel/core

@babel/preset-env

rollup

rollup-plugin-babel

rollup-plugin-serve

cross-env

-D

**四、安装完毕后，编写****rollup****配置文件**
**rollup.config.js****文件编写**
import babel from 'rollup-plugin-babel';
import serve from 'rollup-plugin-serve';
export default {
  input: './src/index.js',
  output: {
  file: 'dist/umd/vue.js',
    format: 'umd', // 打包后的模块化类型
    name: 'Vue', // 打包后的全局变量的名字
    sourcemap: true
  },
  plugins: [ // 要使用的插件
    babel({
      exclude: 'node_modules/**' // 使用babel进行转化，但排除node_modules
    }),
    process.env.ENV === 'development' ? serve({
      open: true,
      openPage: '/public/index.html',
      port: 3000,
      contentBase: ''
    }) : null
  ]
}
配置中

output配置，可以使用数组来配置不同格式的打包文件。

plugins：用来对rollup的各插件进行配置；上面配置了plugin-babel和plugin-serve；

sourcemap如下

五、配置babel配置文件
**配置****.babelrc****文件**
{
    "presets": [
        "@babel/preset-env"
    ]
}

**六、执行脚本配置：**

打包配置

查看源码：
(function (factory) {
    typeof define === 'function' && define.amd ? define(factory) :
    factory();
}((function () { 'use strict';
    console.log('object');
})));
//# sourceMappingURL=vue.js.map

  起服务配置：

roll -c 表示使用默认的rollup.config.js文件,-w，表示监控文件的变化；

cross-env 后的ENV=xxx表示设置一个变量，这个变量可以用过process.ENV来访问到。

在根目录下创建html模板：index.html

引入打包后的vue.js

修改src/index.js文件，测试打包是否成功；

总结：

通过rollup工具，我们将src中的源码打包到了dist目录中；

src中使用了高级语法，我们通过babel工具，将它转化为低级语法，并转换成了我们指定的格式，如umd,esm,iife,cjs等；

然后我们就可以在index.html中引入打包后的js文件，使用vue构建程序；

补充安装rollup-plugin-node-resolve; 可以在找不到相应文件时，会按node方式去解析文件，即默认使用index.js文件；安装：yarn add rollup-plugin-node-resolve 配置如下图：

这样rollup打包时，在找不到文件时，会尝试使用node的方式去解析，比如会考虑index.js文件；

环境搭建 ​

环境搭建