preface

Vue. Js official family bucket provides build scaffolding is based on webPack build tools. The mainstream way of compiling vue.js in the industry is based on WebPack.

Rollup.js is positioned to be used for compiling libraries, component types of source code, and there are few scenarios for compiling vue.js applications, but it does not mean that rollup.js is not suitable for compiling vue.js. This article mainly explains how to compile vue.js 3.x source code with rollup.js.

Implementation steps

Step 1: Catalog and preparation

. ├ ─ ─ the buildCompile the script│ ├ ─ ─ a rollup. Config. Dev. Js │ ├ ─ ─ a rollup. Config. Js │ └ ─ ─ a rollup. Config. Prod. Js ├ ─ ─ dist## The result of compiling│ ├─ ├─ ├─ ├─ download.txt ├─ ├─ ├.txt ├─ ├.txt## Source code to compile├ ─ ─ App. Vue └ ─ ─ index, jsCopy the code

Install the corresponding compiled NPM module

## Install the rollup.js base module
npm i --save-dev rollup 

## Install rollup.js to compile the local development service plug-in
npm i --save-dev rollup-plugin-serve

## Install the rollup.js compiler code obfuscator plugin
npm i --save-dev rollup-plugin-uglify

## Install rollup.js to compile NPM module plug-in module
npm i --save-dev @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace

## Install rollup.js to compile ES6+ Babel module
npm i --save-dev @rollup/plugin-babel @babel/core @babel/preset-env 

## Install rollup.js and compile vue.js 3.x module
npm i --save-dev rollup-plugin-vue @vue/compiler-sfc rollup-plugin-css-only

## Install vue.js 3.x
npm i --save vue@next
Copy the code

Step 2: rollup configuration

  • Compiling basic configuration./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(),
    ],
  },
]
Copy the code
  • Development modeConfigure basic./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;
Copy the code
  • Production modeConfigure basic./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;
Copy the code
  • in./package.jsonConfigure the compile execution script
{
  "scripts": {
    "build": "node_modules/.bin/rollup -c ./build/rollup.config.prod.js",
    "dev": "node_modules/.bin/rollup -w -c ./build/rollup.config.dev.js"
  },
}
Copy the code

Step 3: Compile the ES6 source code

  • Source content./src/index.js
import Vue from 'vue/index';
import App from './App.vue';

Vue.createApp(App).mount('#App');
Copy the code
  • Source content./src/App.vue
<template>
  <h1>Hello {{ name }}</h1>
</template>

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

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

Step 4: Compile the results

  • Execute in the project directoryDevelopment mode npm run dev
  • Compile results in directory./dist/ 下

Step 5: View the result in the browser

  • Example source code./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>
Copy the code
  • Go to http://127.0.0.1:3000/example/index.html