在本章中，我们将看到如何使用Babel将ES6模块转换为ES5。
考虑JavaScript的部分情况代码需要重用。 ES6通过模块的概念来解决问题。
模块只不过是一个用文件编写的JavaScript代码块。模块中的函数或变量不可用，除非模块文件导出它们。
简单来说，模块可以帮助您在模块中编写代码并仅公开那些代码应该由代码的其他部分访问的部分代码。
让我们考虑一个示例来了解如何使用模块以及如何将其导出以在代码中使用它。
add.js
var add =（x，y）=> {
返回x + y;
}
module.exports = add;
multiply.js
var multiply =（x，y）=> {
返回x * y;
};
module.exports = multiply;
main.js
import从'./add'添加;
导入从'./multiply'乘以
让a = add（10,20）;
让b =乘（40,10）;
console.log（"％c"+ a，"font-size:30px; color:green;"）;
console.log（"％c"+ b，"font-size:30px; color:green;"）;
我有三个文件add.js，它们增加了2个给定的数字，multiply.js乘以两个给定的数字和main.js，它们调用add和multiply，并输出控制台。
在 main.js 中提供 add.js 和 multiply.js ，我们必须首先导出它，如下图所示−
module.exports = add;
module.exports = multiply;
要在 main.js 中使用它们，我们需要导入它们，如下所示
import from'./add';
导入乘以'./multiply'
我们需要模块捆绑器来构建文件，以便我们可以在浏览器中执行它们。 / p>
我们可以这样做&减去;
在本节中，我们将看到ES6模块是什么。我们还将学习如何使用webpack。
在开始之前，我们需要安装以下软件包−
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install - save-dev babel-loader
npm install --save-dev babel-preset-env
我们已经在脚本中添加了打包和发布任务，以便使用npm运行它们。这是将构建最终文件的webpack.config.js文件。
var path = require（'path'）;
module.exports = {
条目:{
app:'。/ src / main.js'
}，
输出:{
path:path.resolve（__ dirname，'dev'），
filename:'main_bundle.js'
}，
mode:'development'，
module:{
规则:[
{
test:/\。js $ /，
包括:path.resolve（__ dirname，'src'），
loader:'babel -loader'，
查询:{
预设:['env']
}
}
]
}
};
运行命令npm run pack来构建文件。最终文件将存储在dev /文件夹中。
npm run pack
dev / main_bundle.js 创建公共文件。该文件结合了add.js，multiply.js和main.js，并将其存储在 dev / main_bundle.js 中。
/ ****** /（function（modules）{// webpackBootstrap
/ ****** / //模块缓存
/ ****** / var installedModules = {};
/ ****** /
/ ****** / // require函数
/ ****** / function __webpack_require __（moduleId） {
/ ****** /
/ ****** / //检查模块是否在缓存
/ ****** / if（installedModules [moduleId] ]）{
/ ****** / return installedModules [moduleId] .exports;
/ ****** /}
/ ****** / //创建一个新模块（并将其放入缓存中）
/ ****** / var module = installedModules [moduleId] = {
/ ****** / i:moduleId，
/ ****** / l:false，
/ ****** / exports:{}
/ ****** /};
/ ****** /
/ ****** / //执行模块函数
/ ****** / modules [moduleId] .call（module.exports，module， module.ex ports，__ webpack_require__）;
/ ****** /
/ ****** / //将模块标记为已加载
/ ****** / module.l = true;
/ ****** /
/ ****** / //返回模块的导出
/ ****** / return module.exports;
/ ****** /}
/ ****** /
/ ****** /
/ ****** / / /公开模块对象（__webpack_modules__）
/ ****** / __webpack_require __。m = modules;
/ ****** /
/ ****** / //公开模块缓存
/ ****** / __webpack_require __。c = installedModules;
/ ****** /
/ ****** / //为和谐输出定义getter函数
/ ****** / __webpack_require __。d = function（ export，name，getter）{
/ ****** / if（！__ webpack_require __。o（exports，name））{
/ ****** / Object.defineProperty（exports， name，{enumerable:true，get:getter}）;
/ ****** /}
/ ****** /};
/ ****** /
/ ****** / //在导出时定义__esModule
/ ****** / __webpack_require __。r = function（exports） {
/ ****** / if（typeof Symbol！=='undefined'&&& Symbol.toStringTag）{
/ ****** / Object.defineProperty（exports， Symbol.toStringTag，{value:'Module'}）;
/ ****** /}
/ ****** / Object.defineProperty（exports，'__ myModule'，{value:true}）;
/ ****** /};
/ ****** /
/ ****** / //创建一个虚假的命名空间对象
/ ****** / // mode& 1:value是模块ID，需要它
/ ****** / // mode& 2:将所有值的属性合并到ns
/ ****** / //模式& 4:已经ns对象的返回值
/ ****** / //模式& 8 | 1:表现得像需要
/ ****** / __webpack_require __。t = function（value，mode）{
/ ****** / if（mode& 1）value = __webpack_require __（value）;
/ ****** / if（mode& 8）返回值;
/ ****** / if（（mode& 4）&& typeof value ==='object'&& value&& value .__ esModule）返回值;
/ ****** / var ns = Object.create（null）;
/ ****** / __webpack_require __。r（ns）;
/ ****** / Object.defineProperty（ns，'default'，{enumerable:true，value:value}）;
/ ****** / if（模式& 2&& typeof value！='string'）
for（var key in value）__ webpack_require __。d（ns，key，function （key）{return value [key];} .bind（null，key））;
/ ****** / return ns;
/ ****** /};
/ ****** /
/ ****** / //与非和谐模块兼容的getDefaultExport函数
/ ****** / __webpack_require __。n = function（module）{
/ ****** / var getter = module&& module .__ esModule？
/ ****** / function getDefault（）{return module ['default']; }:
/ ****** / function getModuleExports（）{return module; };
/ ****** / __webpack_require __。d（getter，'a'，getter）;
/ ****** / return getter;
/ ****** /};
/ ****** /
/ ****** / // Object.prototype.hasOwnProperty.call
/ ****** / __webpack_require __。o = function （object，property）{
return Object.prototype.hasOwnProperty.call（object，property）;
};
/ ****** /
/ ****** / // __webpack_public_path__
/ ****** / __webpack_require __。p ="";
/ ****** /
/ ****** /
/ ****** / //加载输入模块并返回导出
/ * ***** / return __webpack_require __（__ webpack_require __。s ="。/ src / main.js"）;
/ ****** /}）
/ ******************************* ***************************************** /
/ *** *** /（{
/ *** /"./ src / add.js":
/ *！****************** **！* \
！***。/ src / add.js ***！
\ ******************* * /
/ *！没有找到静态导出* /
/ *** /（函数（模块，导出，__ webpack_require__）{
"use strict";
eval（
"\ n\\\
var add = function add（x，y）{\ n return x + y; \ n};
\ nn \ nmodule.exports =添加;
\ n \ n //＃sourceURL = webpack:///./scrc/add.js？"
）;
/ *** /}），
/ *** /"./src/main.js":
/ *！*********************！* \
！*** ./src/main.js ***！
\ ********************* /
/ *！找不到静态导出* /
/ *** /（函数（module，exports，__ webpack_require__）{
"use strict";
eval（
"\\\
\\\
var _add = __webpack_require __（/ *！。/ add * / \"./ src / add.js \"）;
\ n \\ _nvar _add2 = _interopRequireDefault（_add）;
\ n \ _nvar _multiply = __webpack_require __（/ *！ ./multiply * / \"./ src / multiply.js \"）;
\ n \ _nvar _multiply2 = _interopRequireDefault（_multiply）;
\ n \ nnfunction_interopRequireDefault（obj）{
return obj& gt;& gt; obj .__ esModule？ obj:{default:obj};
}
\ n \ nvar a =（0，_add2.default）（10,20）;
\ nvar b =（0，_multiply2.default）（40,10）;
\ n \ nnconsole.log（\"％c \"+ a，\"font-size:30px; color:green; \"）;
\ nnconsole.log（\"％c \"+ b，\"font-size:30px; color:green; \"）;
\ n \ n //＃sourceURL = webpack:///./scrc/main.js？"
）;
/ *** /}） ，
/ *** /"./src/multiply.js":
/ *！******************* ******！* \
！*** ./src/multiply.js ***！
\ *************** ********** /
/ *！找不到静态导出* /
/ *** /（函数（module，exports，__ webpack_require__）{
"use strict";
eval（
"\ n\\\
var multiply = function multiply（x，y）{\ n return x * y; \ n};
\ nn; \\ nmnmle.exports = multiply;
\ n \ n //＃sourceURL = webpack:///./scrc/multiply.js？"
）;
/ *** /}）
/ ****** /}）;
以下是在浏览器中测试输出的命令−
npm run publish
在项目中添加index.html。这称为dev /main_bundle.js。
< html>
< head>< / head>
< body>
< script type ="text / javascript"src ="dev / main_bundle.js">< / script>
< / body>
< / html>
要使用Gulp将模块捆绑到一个文件中，我们将使用browserify和babelify。首先，我们将创建项目设置并安装所需的包。
npm init
在开始项目设置之前，我们需要安装以下软件包−
npm install --save-dev gulp
npm install --save-dev babelify
npm install --save-dev browserify
npm install --save-dev babel-preset -env
npm install --save-dev babel-core
npm install --save-dev gulp-connect
npm install --save-dev vinyl-buffer
npm install --save-dev vinyl-source-stream
现在让我们创建gulpfile.js，这将有助于运行任务将模块捆绑在一起。我们将使用与webpack相同的文件。
add.js
var add =（x，y）=> {
返回x + y;
}
module.exports = add;
multiply.js
var multiply =（x，y）=> {
返回x * y;
};
module.exports = multiply;
main.js
import从'./add'添加;
导入从'./multiply'乘以
让a = add（10,20）;
让b =乘（40,10）;
console.log（"％c"+ a，"font-size:30px; color:green;"）;
console.log（"％c"+ b，"font-size:30px; color:green;"）;
这里创建了gulpfile.js。用户将浏览器并使用tranform进行babelify。 babel-preset-env用于将代码转换为es5。
Gulpfile.js
const gulp = require（'gulp'）;
const babelify = require（'babelify'）;
const browserify = require（'browserify'）;
const connect = require（"gulp-connect"）;
const source = require（'vinyl-source-stream'）;
const buffer = require（'vinyl-buffer'）;
gulp.task（'build'，（）=> {
browserify（'src / main.js'）
.transform（'babelify'，{
预设:['env']
}）
.bundle（）
.pipe（source（'main.js'））
.pipe（buffer（））
.pipe（gulp.dest（'dev /'））;
}）;
gulp.task（'default'，['es6']，（）=> {
gulp.watch（'src / app.js'，['es6']）
}）;
gulp.task（'watch'，（）=> {
gulp.watch（'./*。js'，['build']）;
} ）;
gulp.task（"connect"，function（）{
connect.server（{
root:"。"，
livereload:true
}）;
}）;
gulp.task（'start'，['build'，'watch'，'connect']）;
我们使用browserify和babelify来处理模块导出和导入，并将它们合并到一个文件中，如下所示;
gulp.task（'build'，（）=> {
browserify（'src / main.js'）
.transform（' babelify'，{
presets:['env']
}）
.bundle（）
.pipe（source（'main.js'））
。 pipe（buffer（））
.pipe（gulp.dest（'dev /'））;
}）;
我们使用了变换，其中使用预设env调用babelify。
带有main的src文件夹。 js被赋予browserify并保存在dev文件夹中。
我们需要运行命令 gulp start 来编译文件−
npm start
这是在 dev / <中创建的最终文件/ b>文件夹&减号;
（function（）{
function r（e，n，t）{
函数o（i，f）{
if（！n [i]）{
if（！e [i]）{
var c ="function"== typeof require && require;
如果（！f && c）返回c（i，！0）; if（u）返回u（i，！0）;
var a = new错误（"找不到模块""+ i +"' "）;
抛出a.code ="MODULE_NOT_FOUND"，a
}
var p = n [i] = {exports:{}};
e [i] [0] .call（
p.exports，function（r）{
var n = e [i] [1] [r];
return o （n || r）
}
，p，p.exports，r，e，n，t）
}
返回n [i] .exports
}
for（var u ="function"== typeof require>> require，i = 0; i< t.length; i ++）o（t [i]）; return o
}
返回r
}）（）
（{1:[function（require，module，exports）{
"use strict";
var add = function add（x，y）{
return x + y;
};
module.exports = add;
}，{}]，2: [function（require，module，exports）{
'use strict';
var _add = require（'./ add'）;
var _add2 = _interopRequireDefault（_add） ;
var _multiply = require（'./ multiply'）;
var _multiply2 = _interopRequireDefault（_multiply）;
function _interopRequireDefault（obj）{return obj && obj .__ esModule？obj:{default :obj};}
var a =（0，_add2.default）（10,20）;
var b =（0，_multiply2.default）（40,10）;
console.log（"％c"+ a，"font-size:30px; color:green;"）;
console.log（"％c"+ b，"font-size:30px; color:green;"）;
}，
{"。/ add":1，/。/ multiplyly::} {3} [功能（需要，模块，出口）{
"use strict";
var multiply = function multiply（x，y）{
return x * y;
};
module.exports = multiply;
}，{}]}，{}，[2]）;
我们将在index.html中使用相同的内容并在浏览器中运行相同的内容以获得输出−
< html>
< head>< / head>
< body>
< h1>模块使用Gulp< / h1>
< script type ="text / javascript"src ="dev / main.js">< / script>
< / body>
< / html>
