Commonjs specification

If you have studied Webpack, you probably know what the commonJS specification is, which is how we import and export webpack.config.js.

  • Does anyone have an idea that I want to know how it works?
  • Because we know that commonJS imports and exports need to be compiled with WebPack to work properly
  • So let’s look at how they implement this compilation process
  • First, the nature of modularity is to isolate controls, proving that they are scoped out
  • So let’s start with an immediate function

Why don’t we take a look at commonJS code first

  • Let’s just create some random JS file and write some random stuff in there
const dateFormate=(date) = >{
  return '1232-23-23'
}

module.exports={
  dateFormate
}
Copy the code

So we’re going to export a dateFormate function and then we’re going to create a folder to import that function

const {dateFormate} = require('./js/formate')

console.log(dateFormate('abc'));
Copy the code

This introduces the function we just exported into another file

  • Let’s look at their structure
  • There are two files, which we can view as two objects or functions
  • Besides, their existence does not affect other functions after packaging, and then introducing random changes in the file is called
  • Then we should have a separate scope to avoid affecting other files
(function(){
    //pass} ())Copy the code

So we have an independent role that is not influenced by the outside world

  • What’s next?
  • If we look at the export function file, first it is a JS file, so we can abstract it as an object
  • Use the import path as its key
(function(){
    var __webpack_module__ = {
           './js/formate':function(module){
               const dateFormate=(date) = >{
                  return '1232-23-23'
               }
               module.exports={
                   dateFormate
               }
           }
    }
}())
Copy the code

The module in the code and I’ll show you where it comes from in a second,

  • This code is how the CommonJS export works
  • The code we write in JS will eventually be compiled by Webpack to look like this
  • We can see that the path we wrote in the export is treated as the key value, and the exported function is compiled to the corresponding value

– How does he implement the import

(function(){
    // Define an object
    // Module path (key): function (value)
    var __webpack_module__ = {
           './js/formate':function(module){
               const dateFormate=(date) = >{
                  return '1232-23-23'
               }
               module.exports={
                   dateFormate
               }
           }
    }
    // Define an object to be used as a cache for loading modules
    var __webpack_module_cache__={}
    // We can use this as our imported require function, and the moduleId is the path
    var __webpack__require__  = function(moduleId){
        //1. Check whether __webpack_module_cache__ holds the previous value
        // If there is, we can just go back out
        if(__webpack_module_cache__[moduleId]! =undefined) {return __webpack_module_cache__[moduleId].exports
        }
         //2. Assign the same object to the module and __webpack_module_cache__[moduleId] variables
        var module = __webpack_module_cache__ = {exports: {}}//3. Load the execution module
        __webpack_module__[moduleId](module.module.exports,__webpack_module_cache__)
        Module. exports {dateFormate:function}
        return module.exports
    }
}())
Copy the code
  • We’ve done most of that
  • Now, how do I export this piece of stuff
(function(){
    // Define an object
    // Module path (key): function (value)
    var __webpack_module__ = {
           './js/formate':function(module){
               const dateFormate=(date) = >{
                  return '1232-23-23'
               }
               module.exports={
                   dateFormate
               }
           }
    }
    // Define an object to be used as a cache for loading modules
    var __webpack_module_cache__={}
    // We can use this as our imported require function, and the moduleId is the path
    var __webpack__require__  = function(moduleId){
        //1. Check whether __webpack_module_cache__ holds the previous value
        // If there is, we can just go back out
        if(__webpack_module_cache__[moduleId]! =undefined) {return __webpack_module_cache__[moduleId].exports
        }
         //2. Assign the same object to the module and __webpack_module_cache__[moduleId] variables
        var module = __webpack_module_cache__ = {exports: {}}//3. Load the execution module
        __webpack_module__[moduleId](module.module.exports,__webpack_module_cache__)
        Module. exports {dateFormate:function}
        return module.exports
    }
    // Start executing the code logic
    (function(){
        const {dateFormate} = __webpack__require__('./js/formate')
        console.log(dateFormate('asdasd'))
    })()
}())
Copy the code

That’s how commonJS imports and exports work

  • If you have multiple files, you can avoid interacting with each other by simply having multiple block-level scopes

At the end

  • Here we end, I hope you can study hard
  • We will bring you the webpack-loader chapter, stay tuned!