The following content is purely personal bullshit, for reference only
catalogue
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