JS模块化-ES6的模块化

Posted 2021-03-05 俄罗斯方块

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS模块化-ES6的模块化相关的知识，希望对你有一定的参考价值。

使用ES6实现模块化：

　　（1）创建自己的模块，导出模块代码；

　　（2）导入自己的模块

问题：多数平台或浏览器还不支持ES6的模块

解决：（1）babel-node；（2）es6转es5；（3）让浏览器支持es6modules（浏览器的隐藏模式）

已知三个子模块和一个主模块的关系如下：

四个js文件：

utils.js

products.js (依赖于utils.js)

users.js

main.js

终端输入：node js/main.js 可能会报错：

表示不支持import（说明浏览器更不可能支持）

nodejs不兼容es6标准的模块定义语法

解决方法一：babel-node

步骤：

（1）终端输入：pm -i babel-cli -g

（2）安装语法插件：npm i babel-preset-es2015 -save

（3）在当前项目的根目录下新建 .babelrc 文件并配置：

{
  "presets":[
    "es2015"
  ],
  "plugins":[]
}

此时再在终端输入： babel-node js/main.js 即可正确执行main.js中的代码

这个方法可以让第三方工具支持

解决方案二：将ES6转换成ES5（依然是babel工具）

步骤：

（1）当前项目找到package.json 找到"scripts"项，向里面添加命令：

"build":"babel   js   -d    build --out-dir es5_build"
//意思是将js文件夹下所有的js文件转换成es5版本，并且保存到es5_build文件夹下

（2）这样在每次运行新的项目之前，在终端输入 npm run build 会自动执行package.json下的script指令，会多出一个es5_build文件夹，包含转换结束后的文件：

此时再直接运行node es5_build/main.js就不会报不支持import的错误了：

到这一步，就可以让服务端接受ES6标准的模块化语法了。

解决方案三：如何让浏览器端也支持ES6模块规范

步骤一

安装工具：

（1）打包工具：

　　　　npm i -g webpack-cli babel-cli

（2）ES2015两个工具：

　　　　npm i babel-preset-es2015 babel-loader

（3）兼容性包

　　　　npm i --save-dev babel-polyfill

（4）

　　　　npm i -save babel-core

步骤二：

新建webpack.config.js文件并进行配置：

module.exports={ 
  //程序的入口是执行babel-polyfill兼容代码，把main.js变成兼容代码
  entry:["babel-polyfill","./js/main.js"],
  // 把js/main.js变成兼容代码
  output:{
　　 // 输出路径及文件名
    path:__dirname+"/dist",
    filename:"main.js"
    // 将编译打包后的mian.js保存到当前目录下dist文件夹下的main.js
  },
  module:{
    rules:[{
      test:/.js$/,
      // 使用babel-loader工具将制定目录下的所有js文件都加载下来
      loader:"babel-loader"
    }]
  }
}