The following content is purely personal bullshit, for reference only

catalogue

1, Overview

2, Basic grammar

 

1, Overview

1. Problems of traditional development mode

Naming conflicts: multiple js Variables with the same name cannot exist between files
 File Dependencies: js Files cannot be cross referenced

2. Modularization

1. summary

Encapsulate a single function into a module file. Modules are isolated from each other, but the internal can be exposed through a specific interface
 Members can also depend on other modules
 Benefits: easy code reuse, easy maintenance, and improved efficiency

2. Relevant specifications

1) Browser side

AMD: Require.js
CMD: Sea,js

Out of date

2) Server side

CommonJS
    Modules are divided into single file modules and packages
    Module member export: module.exports and exports
    Module member import: require('Module identifier')

3)ES6

Modular specification for browser and server

each js Files are a separate module
 Import module members: import
 Exposed module members: export

CommonJS modularization is supported by default in Node. For ES6 modularization specification, it is also supported by babel plug-in (babel is a syntax conversion tool that can convert high-level js code into low-level js code without compatibility problems) to support high-level ES6

2, Basic grammar

overview

Demo
 Default import export
 Import and export on demand
 Import module directly and execute

1,Demo

(1) Install Node and WebStorm (Hbuilder is also OK)

Configure npm image, WS binding node, node local warehouse Path (not recommended), node environment variable, etc. Reference:

Nodejs installation and environment configuration

Configuring node environment under Webstorm

npm problem in idea or webstorm configuration

'cnpm'is not an internal or external command, which is a really effective solution

(2) Installing babel

Run under the project folder (empty), and it will generate package lock JSON file, node_modules folder

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

(3) Installing polyfill

Execute under the project root path:

npm install --save @babel/polyfill

Extend knowledge: after the above two steps, the dependencies required for the project are completed. If you need to clone one, you only need to copy the package lock JSON files are executed in an empty folder: npm install can download all dependencies

(4) babel configuration file

Create babel Config JS, as follows

//Syntax conversion plug-in array, using env plug-in
const presets = [
    ["@babel/env",{
        //The converted code should at least support
        targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1"
        }
    }]
];

//Exposed for babel
module.exports = { presets };

(5)index.js

Create index JS, as follows:

console.log('OK');

(6) Operation

npx babel-node index.js

Result: the console will print OK

2. Default import export

(1) Create m1 JS, as follows:

let a = 10
let c = 20
let d = 30

function show() {
  console.log('1111111111111')
}
//Default export: a, c attributes, show method
export default {
  a,
  c,
  show
}

(2) Index JS default import

//The m1 name exported by default can be written freely, but it is better to have a meaningful name
//from is followed by the relative path of the js file
import m1 from './m1.js'  

console.log(m1); //Print m1

Note: each js module can have but only one export default, otherwise an error will be reported

3. Import and export on demand

(1) Create m2 JS, as follows:

export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {
  console.log('ooooooooo')
}

(2) Index JS import on demand

//m1 is the default import member. It contains a, c, and show
//On demand import follows
import m1, { s1, s2 as ss2, say } from './m1.js'

console.log(m1);
console.log(s1);
console.log(ss2);
console.log(say);

4. Import module directly and execute

(1) Create m3 JS

for (let i = 0; i < 3; i++) {
  console.log(i)
}

//The module does not expose any members

(2) Index JS import and execute

import './m2.js'  //Only execute js code in m2, but do not accept its members