模块化之babel

出现

  现在的web系统越来越庞大、复杂，需要团队分工，多人协作，大型系统的javascript文件经常存在复杂的依赖关系，
  后期的维护成本会越来越高。
  JavaScript模块化正式为了解决这一需求而诞生。

因为目前浏览器不支持ES6模块化语法，所以需要再node里进行

1、通过babel编译js代码

  a、创建src 文件夹： 里面放源代码就行
  b、 在根目录下执行npm init 

2、安装依赖

  a、// 命令行执行的
        npm install --save-dev @babel/core @babel/cli @babel/preset-env
        npm install --save @babel/polyfill

3、添加babel的配置

  在项目根目录下创建babel.config.js的文件，在里面写
 
   {
    "presets": [
      [
        "@babel/env",
        {
          "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1"
          },
          "useBuiltIns": "usage"
        }
      ]
    ]
}

4、执行编译命令

  在根目录执行：npx babel  src --out-dir lib

5、运行！！！！

  node .\lib\b.js
 此处我运行的是b.js  如果是别的就要改名字。

**********************************************************************************************

知识点

  1、默认导出\导入

  export default{ //此处填名字}
  import 随便起个名字 from 导入的js的位置

  2、普通导出\导入

  export const age = 65;
  import { //名字 as 别名}  from 导入的js的位置     

  3、批量导出
  export {name,age,say}
      整体导入
  import * as obj from  导入的js的位置  

注意

  1、导入的变量是只读的状态，不能修改。
  2、导入不存在的变量，值为undefined.