Vue principle: Rollup sets up a Vue environment

This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Use rollup to build a Vue2 source learning environment, based on this environment to practice and simulate Vue2 part of the core logic

Why choose Rollup over Webpack?

Rollup is a JS module wrapper that can compile small pieces of code into large, complex pieces of code. Rollup. JS is more focused on Javascript library packaging, and generally uses Wwebpack for application development and Rollup for library development

Initial directory

Create and initialize the directory

mkdir n-vue
cd n-vue
npm init -y
Copy the code

Configure a Rollup

Install related NPM packages

npm install @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve cross-env -D
Copy the code

• Use a rollup:RollupPackaging, must rely on this plug-in
• @ Babel/core: usebabelRequired dependencies, core modules
• @babel/preset-env: Needs to be preset in the codeES6The code is translated asES5.babelProvides some preset configurations, which contain many commonly usedbabelThe plug-in
• A rollup plugin – Babel: in theRollupThe use ofbabelYou need to rely on this plug-in
• Rollup-plugin-serve: used to create a static service locally, convenient for development and debugging
• Cross-env: used to set environment variables to help developers set variables

To create a directory structure, refer to the following directories

|-- n-vue
    |-- .babelrc
    |-- package-lock.json
    |-- package.json
    |-- rollup.config.js
    |-- public
    |   |-- index.html
    |-- src
        |-- index.js
Copy the code

Because you use Babel, you need to simply configure it, create a.babelrc file and configure it

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

Create the Rollup configuration file rollup.config.js and configure it

import babel from "rollup-plugin-babel";
import serve from "rollup-plugin-serve";

export default {
  input: "./src/index.js".// Import file
  output: {
    format: "umd".// Modular type, supporting AMD, CMD, etc
    file: "dist/vue.js".// Package the path
    name: "Vue".// The name of the packaged global variable, which can be used globally
    sourcemap: true.// Open source debugging, easy to find the source address, easy to debug
  },
  plugins: [
    babel({
      // Babel configuration, ignoring node_modules
      exclude: "node_modules/**",
    }),
    process.env.ENV === "development"
      ? serve({
          // The development environment, a local static service
          open: true.// Automatically opens in the browser
          openPage: "/public/index.html".// Entry page path
          port: 9527./ / the port number
          contentBase: "".// Static file path, "" according to the current directory structure
        })
      : null,]};Copy the code

Configuring the Execution Script

{
  "scripts": {
    "build:dev": "rollup -c"."serve": "cross-env ENV=development rollup -c -w"}}Copy the code

Now that your environment is ready, you need to verify that your environment scaffolding is working

Simply write some test code

Write a function in SRC /index.js and

function Vue(options) {
  console.log(options);
}

export default Vue;
Copy the code

Import the generated JS code in ‘ ‘public/index.html’

<script src=".. /dist/vue.js"></script>
<script>
  window.onload = () = > {
    new Vue({
      name: 'helloWorld'})}</script>
Copy the code

packaging

Command line operation

npm run build:dev
Copy the code

Package success, directory structure added

|-- dist
    |   |-- vue.js
    |   |-- vue.js.map
Copy the code

Vue. Js content

(function (global, factory) {
  typeof exports= = ='object' && typeof module! = ='undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeofglobalThis ! = ='undefined' ? globalThis : global || self, global.Vue = factory()); }) (this, (function () { 'use strict';
  function Vue(options) {
    console.log(options);
  }
  return Vue;
}));
Copy the code

The expected result is met

Run locally

Command line operation

npm run serve
Copy the code

At this time will automatically open the browser: http://localhost:9527/public/index.html, the console will output a object: {name: “helloWorld”}