Vue.js 编译

前言

Vue.js官方全家桶提供的编译脚手架是基于webpack的编译工具。业界主流编译Vue.js的方式都是基于webpack。

跟上一篇文章讲解rollup.js编译React.js一样，。rollup.js的定位是适用于编译库、组件类型的源码，用来编译Vue.js应用的场景比较少，但是不能说明rollup.js就不适于编译Vue.js。本篇主要讲解怎么么用rollup.js编译Vue.js 3.x源码。

实现例子

• 编译 Vue.js 应用

demo例子

https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-04-02/

npm i

## 开发模式
npm run dev

## 生产模式
npm run build

实现步骤

步骤1: 目录和准备

.
├── build ## 编译脚本
│   ├── rollup.config.dev.js
│   ├── rollup.config.js
│   └── rollup.config.prod.js
├── dist ## 编译结果
│   ├── index.js
│   └── index.js.map
├── example
│   └── index.html
├── package.json
└── src ## 待编译源码
    ├── App.vue
    └── index.js

安装对应编译的npm模块

## 安装 rollup.js 基础模块
npm i --save-dev rollup 

## 安装 rollup.js 编译本地开发服务插件
npm i --save-dev rollup-plugin-serve

## 安装 rollup.js 编译代码混淆插件
npm i --save-dev rollup-plugin-uglify

## 安装 rollup.js 编译npm模块 插件模块
npm i --save-dev @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace

## 安装 rollup.js 编译ES6+的 babel 模块
npm i --save-dev @rollup/plugin-babel @babel/core @babel/preset-env 

## 安装 rollup.js 编译Vue.js 3.x模块
npm i --save-dev rollup-plugin-vue @vue/compiler-sfc rollup-plugin-css-only

## 安装 Vue.js 3.x
npm i --save vue@next

步骤2: rollup配置

• 编译基本配置 ./build/rollup.config.js

const path = require('path');
const buble = require('@rollup/plugin-buble');
const { babel } = require('@rollup/plugin-babel');
const nodeResolve = require('@rollup/plugin-node-resolve');
const commonjs = require('@rollup/plugin-commonjs');
const vue = require('rollup-plugin-vue');
const css = require('rollup-plugin-css-only');
const replace = require('@rollup/plugin-replace')

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

// const isProductionEnv = process.env.NODE_ENV === 'production';

const babelOptions = {
  "presets": ['@babel/preset-env'],
}

module.exports = [
  {
    input: resolveFile('src/index.js'),
    // input: resolveFile('src/App.vue'),
    output: {
      file: resolveFile('dist/index.js'),
      format: 'iife',
      name: 'App'
    }, 
    // external: ['vue'],
    plugins: [
      vue({css: false}),
      css(),
      nodeResolve(),
      commonjs(),
      replace({
        'process.env.NODE_ENV': JSON.stringify( 'production' )
      }),
      babel(babelOptions),
      buble(),
    ],
  },
]

• 开发模式配置基本 ./build/rollup.config.dev.js

process.env.NODE_ENV = 'development';

const path = require('path');
const serve = require('rollup-plugin-serve');
const configList = require('./rollup.config');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}
const PORT = 3000;

const devSite = `http://127.0.0.1:${PORT}`;
const devPath = path.join('example', 'index.html');
const devUrl = `${devSite}/${devPath}`;

setTimeout(()=>{
  console.log(`[dev]: ${devUrl}`)
}, 1000);

configList.map((config, index) => {

  config.output.sourcemap = true;

  if( index === 0 ) {
    config.plugins = [
      ...config.plugins,
      ...[
        serve({
          port: PORT,
          contentBase: [resolveFile('')]
        })
      ]
    ]
  }

  return config;
})


module.exports = configList;

• 生产模式配置基本 ./build/rollup.config.prod.js

process.env.NODE_ENV = 'production';

const { uglify } = require('rollup-plugin-uglify');
const configList = require('./rollup.config');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

configList.map((config, index) => {

  config.output.sourcemap = false;
  config.plugins = [
    ...config.plugins,
    ...[
      uglify()
    ]
  ]

  return config;
})

module.exports = configList;

• 在./package.json配置编译执行脚本

  {
  "scripts": {
    "build": "node_modules/.bin/rollup -c ./build/rollup.config.prod.js",
    "dev": "node_modules/.bin/rollup -w -c ./build/rollup.config.dev.js"
  },
  }
  

步骤3: 待编译ES6源码

• 源码内容 ./src/index.js

import Vue from 'vue/index';
import App from './App.vue';

Vue.createApp(App).mount('#App');

• 源码内容 ./src/App.vue

<template>
  <h1>Hello {{ name }}</h1>
</template>

<script>
export default {
  data() {
    return { name: 'World!' }
  }
}
</script>

<style scoped>
h1 {
  color: #cccccc;
}
</style>

步骤4: 编译结果

• 在项目目录下执行 开发模式 npm run dev
• 编译结果在目录 ./dist/ 下

步骤5: 浏览器查看结果

• example源码./example/index.html

<html>
  <head>
    <script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.js"></script>
    <link rel="stylesheet" href="./../dist/index.css" />
  </head>
  <body>
    <p>hello rollup + vuejs</p>
    <div id="App"></div>
    <script src="./../dist/index.js"></script>
  </body>
</html>

• 访问 http://127.0.0.1:3000/example/index.html