This is the first day of my participation in Gwen Challenge

One, foreword

Dear friends of the Nuggets, some time ago, I participated in the recruitment of authors and migrated more than 10 articles to the nuggets

I have been too busy to write for a long time. This time, I try to participate in the challenge of writing more articles. I hope I can stick to it and find the feeling of writing things

It is difficult to write anything valuable to everyone at present, which is one of the reasons why I haven’t written anything for more than a year

Writing a good article is very difficult: from topic selection, outline, to questions, ideas, and graphic animation typesetting and so on

Therefore, in line with the principle of “limited time can write less”, try to study vue2. X source code comb

Although the length of each article will not be very long, but will try to focus on one point to clarify things

A column should then be created: Study Notes on the vue2.x source code (Update: already created)

I hope I can break up the knowledge points and explain the ins and outs of the problem clearly. After all, it is the most important to understand

Learn first, write out others can understand, that is really will

So, it doesn’t matter whether you like it or not

Use Rollup to complete the Vue source code environment

Second, build the Vue2 environment with Rollup

1. Project initialization

npm init -y
Copy the code
{
  "name": "source-learning-vue"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": []."author": ""."license": "ISC"
}
Copy the code

Install Rollup package dependencies

// Install rollup for package builds of Vue source code
npm install rollup
// Install the core module @babel/core;
npm install @babel/core
Rollup is associated with Babel
npm install rollup-plugin-babel
// Lower to higher syntax: convert ES6 to ES5
npm install @babel/preset-env 

// Merge development environment dependencies
npm install rollup @babel/core rollup-plugin-babel @babel/preset-env -D
Copy the code

3. Write the vue.js entry file

Package entry: SRC /index.js

function Vue(){}export default Vue;
Copy the code

4. Write the Rollup configuration file

The default rollup configuration file name is rollup.config.js

import babel from 'rollup-plugin-babel'

// Export the rollup configuration object
export default {
    input:'./src/index.js'.// Pack the entry
    output: {// Can be defined as an array
        file:'dist/vue.js'.// Package export
        format:'umd'.// IIFE (immediately execute function), ESM (ES6 module), CJS (Node specification), UMD (AMD + CJS)
        name:'Vue'.// Export the module Vue and bind it to window
        sourcemap:true./ / open sourcemap
    },
    plugins:[
        babel({
            exclude:'node_modules/**' // Ignore all files under node_modules}})]Copy the code

Create the rollup-script build script

{
  "name": "source-learning-vue"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "dev": "rollup -c -w"	//-c uses the configuration file; -w Monitors file changes
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.14.2"."@babel/preset-env": "^ 7.14.2"."rollup": "^ 2.47.0"."rollup-plugin-babel": "^ 4.4.0"}}Copy the code

6. Execute the build script

npm run dev
Copy the code

7. View the packed files

(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() {} 

  return Vue;

})));

//# sourceMappingURL=vue.js.map
Copy the code

Create Html using vue.js

Create a page entry in the dist directory: index.html

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
</head>
<body>
  <script src="vue.js"></script>
  <script>
    console.log(Vue)
  </script>
</body>
</html>
Copy the code

View the console output, print the Vue function, the development environment is built successfully

End of the three,

This article mainly realizes the construction of Vue source code environment by configuring rollup

Next: Vue data initialization process

Maintain a log

  • 20210603: This is the first release
  • 20210604: Add article cover, topic, preface, code optimization, associated column

TODO: Add screenshots, code visual tweaks, modular introductions, analysis of packaged global.vue