babel 和 ES6模块化

最新推荐文章于 2024-05-26 15:53:25 发布

桃汁11

最新推荐文章于 2024-05-26 15:53:25 发布

阅读量212

点赞数 8

文章标签： es6 javascript 开发语言前端

本文链接：https://blog.csdn.net/weixin_55269913/article/details/134648222

版权

babel--ES6代码转换为ES5的代码

初始化项目
npm init
npm init -y 快速初始化项目
1.安装转码工具
cnpm install -g babel-cli babel
cnpm install --save -dev babel-cli babel-preset-latest
2.安装转换规则
cnpm install -g babel-preset-latest
3.指定转换规则新建.babelrc
{
"presets":["latest"]
}

cnpm install --save-dev babel-cli babel-preset-latest

4.也可以将ES6转换为ES5之后的文件输入到另一个文件当中
babel 2-hello.js --out-file 2-helloo.js
5.将整个src目录下的es6文件转换成es5文件到dist目录
babel src --out-dir dist

模块化

模块化机制(commonjs与es6)

包管理机制 (npm、cnpm、yarn)

ES6模块化代码 import export
NodeJS内有自己的模块化机制,实现CommonJS模块化规范 require('babel-polyfill')

ES6模块化规范

导入模块 import 'xxx'
导出模块
   export {firstName,lastName}；//列表导出
export {firstName as first,lastName as last};//重命名导出
   export var a=3;导出单个属性;
   export functions(){}//导出单个属性
   默认导出
一个模块只能有一个默认导出，不能使用 var、let 或 const 用于导出默认值 export default。
   export default{}
       export default function (){}
错误写法
   var a=1;
   export a; 没有提供对外的接口 export{a}

CommonJS模块化

CommonJS 模块就是对象，输入时必须查找对象属性。

模块化对象

Node内部提供一个Module构造函数。所有模块都是Module的实例。每个模块内部，都有一个module对象，代表当前模块。它有以下属性。module.id 模块的识别符，通常是带有绝对路径的模块文件名。 module.filename 模块的文件名，带有绝对路径。 module.loaded 返回一个布尔值，表示模块是否已经完成加载。 module.parent 返回一个对象，表示调用该模块的模块。 module.children 返回一个数组，表示该模块要用到的其他模块。 module.exports 表示模块对外输出的值。

//nodejs模块导出  commonJS规范
let firstname = 'ren';
let lastname = 'terry';
// module.exports.firstname = firstname;
module.exports = {
  firstname: firstname,
  lastname: lastname
};

// Nodejs模块导入
let { firstname, lastname } = require('./module3');
console.log(firstname, lastname);
console.log(module.id);
console.log(module.filename);
console.log(module.loaded);
console.log(module.parent);
console.log(module.children);

CommonJS模块规范和Es6模块规范的区别

1.CommonJS模块化规范
1.1导出模块
let firstname='ren';
let lastname='terry';
setTimeout(()=>{
firstname:'zhao'
},2000)
module.exports={
firstname,
lastname
};
1.2导入模块
let {firstname,lastname}=require('./module1.js');
console.log(firstname,lastname);
setTimeout(()=>{
console.log(firstname,lastname);//ren terry
},4000)

2.ES6模块值得引用
   2.1导出模块
let firstname='ren';
let lastname='terry';
setTimeout(()=>{
firstname='zhao'
},2000)
export {
firstname,
lastname
};
   2.2导入模块
import {firstname,lastname} from './module3.js';
   console.log(firstname,lastname);
   setTimeout(()=>{
console.log(firstname,lastname);//zhao terry
},4000)