Node.js中的模块化

ES6模块化

import语句，导入另一个模块导出的绑定
export语句，从模块中导出函数，对象，值的，供其它模块import导入用
导出
建立一个模块目录src，然后在这个目录下新建一个moda.js

// 缺省导出
export default class A{
    constructor(x){
        this.x=x
    }
    show(){
        console.log(this.x)
    }
}

export function foo(){
    console.log('foo function')
}
//导出常量
export const CONSTA='aaa'

导入
其它模块中导入语句

import {A,foo} from "./src/moda";
import * as mod_a from "./src/moda';

转译工具

转译就是从一种语言代码转换到另一个语言代码，当然也可以从高版本转译到低版本的支持语句
由于JS存在不同版本，不同游览器兼容问题，需要使用transpiler转译工具解决
bable
开发中可以使用较新的ES6语法，通过转译器转换为指定的某些版本代码
官网 http://babeljs.io/
参考文档 https://babeljs.io/docs/en/6.26.3/index.html
当前版本7.x已经有了很大变化，可以参看6.x文档
预设
有如下一些预设presets

presets：
babel-preset-env 当前环境支持的代码，新target
ES2015转码规则
$ npm install --save-dev babel-preset-es2015
react转码规则
$ npm install --save-dev babel-preset-react
ES7不同阶段语法提案的转码规则（共有4个阶段），选装一$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

离线转译安装配置
1、初始化
在项目目录中使用命令工具输入
本次使用git
git教程：https://blog.csdn.net/qq_36883141/article/details/90760790

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (js) test
version: (1.0.0)
description: babel
entry point: (test.js)
test command:
git repository:
keywords:
author: wayne
license: (ISC)
About to write to C:\Users\Administrator\Documents\js\package.json:
{
 "name": "test",
 "version": "1.0.0",
 "description": "babel",
 "main": "test.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "wayne",
 "license": "ISC"
 Is this ok? (yes) yes
}

在项目根目录下回生成package.json文件
2、设置镜像
.npmrc文件
可以放到npm的目录下npmrc文件中
可以放到用户家目录中
可以放到项目根目录中

本次放到项目根目录中：

registry=https://registry.npm.taobao.org

3、安装
项目根目录下执行

$ npm install babel-core babel-cli --save-dev

–save-dev说明
当你为你的模块安装一个依赖模块时，正常情况下你得先安装他们（在模块根目录下npm install module-name），然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里（dependencies）。开发用。–save和–save-dev可以省掉你手动修改package.json文件的步骤。
spm install module-name --save 自动把模块和版本号添加到dependencies部分
spm install module-name --save-dev 自动把模块和版本号添加到devdependencies部分
安装完后，在项目根目录下出现node_modules目录，里面有babel相关模块及依赖的模块
4、修改package.json
替换为scripts的部分

{
  "name": "js",
  "version": "1.0.0",
  "description": "",
  "main": "test.js",
  "scripts": {
  "build": "babel src -d lib"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-core": "^6.26.0"
  }
}

babel src -d lib意思是从src目录中转译后的文件输出到lib目录
5、准备目录
项目根目录下建立src和lib目录
src是源码目录
lib是目标目录
6、配置babel和安装依赖
在根目录下创建.babelrc文件，json格式

｛
“presets”:["env]
｝

env可以根据当前环境自动选择
安装依赖

np, install babel-preset-env --save-dev

7、准备js文件
在src中的mod.js

// 缺省导出
export default class A{
 constructor(x){
 this.x = x;
 }
 show() {
 console.log(this.x);
 }
}
export function foo() {
 console.log('foo function');
}

src目录下新建index.js

import A, {foo} from './mod';
var a = new A(100);
a.show();
foo();

直接在VS Code的环境下执行出错。估计很难有能够正常运行的环境。所以，要转译为ES5的代码。
在项目根目录下执行命令

$ npm run build
> test@1.0.0 build C:\Users\Administrator\Documents\js
> babel src -d lib
src\index.js -> lib\index.js
src\mod.js -> lib\mod.js

可以看到，2个文件被转译
运行文件

$ node lib/index.js
100
foo function

使用babel等转译器转译JS非常流行。
开发者可以在高版本中使用新的语法特性，提高开发效率，把兼容性问题交给转译器处理。

导入导出

说明：导出代码都在src/mod.js中，导入代码都写在src/index.js中，不在赘述
缺省导入导出
只允许一个缺省导出，缺省导出可以是变量、函数、类，但不能使用let、var、const关键字作为默认导出

// 缺省导出 匿名函数
export default function() {
  console.log('default export function') 
}
// 缺省导入
import defaultFunc from './mod'
defaultFunc();

// 缺省导出 命名函数
export default function xyz() {
 console.log('default export function') 
}
// 缺省导入
import defaultFunc from './mod'
defaultFunc();

缺省导入的时候，可以自己重新命名，可以不需要和缺省导出时的名称一致，但最好一致。
缺省导入，不需要在import后使用花括号。
命名导入导出
也可以使用下面的形式，导入所有导出，但是会定义一个新的名词空间。使用名词空间可以避免冲突。

/**
  * 导出举例
  */
// 缺省导出类
export default class {
  constructor(x) {
  this.x = x;
  }
  show(){
  console.log(this.x);
  }
}
// 命名导出 函数
export function foo(){
  console.log('regular foo()');
}
// 函数定义
function bar() {
  console.log('regular bar()')}
// 变量常量定义
let x = 100;
var y = 200;
const z = 300;
// 导出
export {bar, x, y, z};
/**
  * ~~~~~~~~~~~~~~~
  * 导入举例
  * as 设置别名
  */
import defaultCls, {foo, bar, x, y, z as CONST_C} from './mod';
foo();
bar();
console.log(x); // x只读，不可修改，x++异常
console.log(y); // y只读
console.log(CONST_C);
new defaultCls(1000).show();import * as newmod from './mod';
newmod.foo();
newmod.bar();
new newmod.default(2000).show();

也可以使用下面的形式，导入所有导出，但是会定义一个新的名词空间。使用名词空间可以避免冲突。

import * as newmod from './mod';
newmod.foo();
newmod.bar();
new newmod.default(2000).show();
``  `