很多站长朋友们都不太清楚html里面怎么用ES6，今天小编就来给大家整理html里面怎么用ES6，希望对各位有所帮助，具体内容如下：
本文目录一览： 1、 用Es6将html获取的数据传递到.js文件的方法 2、 请教各位老师 JavaScript ES6模块是不是只能在HTML文件里引用？ 3、 CommonJS与ES6模块化的具体使用方式 4、 如何让浏览器支持ES6中的import和export语法 5、 如何让引入es6的html文件运行起来 用Es6将html获取的数据传递到.js文件的方法引入babel翻译器。
ES6 是 JavaScript 语言的下一代标准，使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。html是超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
请教各位老师 JavaScript ES6模块是不是只能在HTML文件里引用？只需要修改入口文件对js的使用时，添加type="module"即可
网页引入 入口js
HTML：<script src="main.js" type="module"></script>
CommonJS与ES6模块化的具体使用方式所以：只需要将需要暴露给外部的变量或者方法 设置为exports的属性 就行，
可以把exports看做一个全局对象，把所有暴露出来的函数和变量都存放在里面
1.先写个6.js文件
CommonJS规范规定，每个模块内部，module变量代表当前模板，这个变量是一个对象，他的 exports 属性（相当于 module.exports ）是对外的接口。 这里详情请看我的另一篇文章： module、exports 和 require的关系
加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块
ES6模块化的使用方法：（注！因为CommonJS类库众多，以及 CommonJS 和 ES6 之间的差异，所以无法直接兼容es6。）
直接/按需导出：可使用多个 用变量/常量的方式
导入：需要用按需导入 {解构} 的方式获取
默认导出：只能使用一个 （default属性只有es6才有）可以用引入对象定义多个属性，但这样在引入后调用的时候，更麻烦。
导入：优点：可以直接使用文件做接收参数且不用结构。
重命名export和import
如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：
如果想看CommonJS与ES6模块化的原理 可以去看我另一篇文章
[秦圆圆]大佬写的 require和import的区别
[大孩子气]大佬写的 require/exports、import/export 的区别
[七分sunshine!]大佬写的# 前端模块化工具 requireJs的使用;
如何让浏览器支持ES6中的import和export语法然而, Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。而且像import和export这两个命令现在在任何浏览器中都是不支持的, 同时babel也无法将其转换为浏览器支持的ES5, 原因在于:
babel只是个翻译，假设a.js 里 import 了 b.js, 对a.js进行转码，只是翻译了a.js，并不会把b.js的内容给读取合并进来, 如果想在最终的某一个js里，包含 a.js，b.js 的代码，那就需要用到打包工具
所以我在这里讲解一下如何使用webpack工具将带有import和export语法的JS文件, 通过打包工具生成所有浏览器都支持的单个JS文件.
1. 下载node.js和webpack
Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。可以说就是服务器端的JS. webpack是一个打包工具, 而它是依赖于node.js运行的.
下载node.js可以通过官网:
具体的安装步骤网上可以搜到很多, 这里不再赘述. 安装完毕后打开node.js自带的命令行工具
这里写图片描述
然后输入如下命令全局安装webpack工具
npm install -g webpack
接着通过命令行工具定位到你的工程文件的根目录下, 再次安装webpack到你的工程中
npm install webpack
2. 编写webpack.config.js文件
在根目录下创建webpack.config.js, 这个文件是用来描述一些要使用webpack工具进行打包的配置信息, 文件内容如下:
这里写图片描述
通过该文件可以使用webpack打包工具, webpack会从import.js进入, 对该文件中的内容进行编译并打包, 最终会在dist目录下生成打包好的文件bundle.js, 编译打包过程中用到的工具在module对象的loaders中声明, 这里使用了babel-loader来对JS文件进行编译(包括从ES6转换为ES5以及打包)
3. 创建import.js
创建一个import.js, 内容如下:
这里写图片描述
在该文件中通过ES6语法import从export.js中引入firstName和lastName变量. 并且通过console.log将引入的两个变量打印到控制台.
4. 创建export.js
这里写图片描述
在该文件中通过ES6语法export将文件中的几个变量作为模块输出给别的文件引用.
5. 创建HTML文件
在HTML文件中直接将webpack最终打包生成的bundle.js文件引入即可, 因为通过webpack工具已经将export.js和import.js的所有内容都打包到一个文件bundle.js中了, 因此在HTML文件中引入该文件即可以将两个JS文件中的代码都执行.
这里写图片描述
6. 配置.babelrc文件
在工程文件的根目录下创建一个.babelrc文件(注意前面有个点), 这个文件是用来描述我要根据什么样的规则、或者是将JS文件编译成什么版本的文件(比如说ES5). 该文件的内容如下:
这里写图片描述
7. 下载相关依赖模块
方式1: 可以像下面这样, 直接在项目根目录下创建一个package.json文件, 并且在文件中指定devDependencies对象, 在该对象中写上我编译及打包中所要使用到的依赖模块, 图片中的webpack就是用于打包的工具, 而其他的以babel开头的选项都是编译JS文件并打包所需要用到的依赖模块.
这里写图片描述
创建好package.json文件后, 在命令行中输入
npm install
npm工具就会根据该文件中devDependencies选项下载对应的依赖模块.
方式2(推荐): Ctrl+R打开运行, 然后输入cmd打开命令行工具, 通过命令行工具一个个安装, 这样可以直接通过npm去下载依赖模块最新的稳定的版本, 同时也不需要自己去记这些模块的版本号
npm install babelnpm install babel-clinpm install babel-corenpm install babel-loadernpm install babel-preset-es2015
8. 使用 webpack打包
使用命令行工具定位到项目的根目录下, 然后输入如下指令
webpack
等待一会儿就会发现工程文件的目录下多了一个dist文件夹, 里面放着的就是打包好了的bundle.js文件, 在HTML文件中通过下面的代码引入js文件
<script src="dist/bundle.js"></script>
然后在浏览器上运行html文件, 使用F12打开开发者工具, 就可以看到console选项中输出两行记录”Micheal”, “Jackson”
如何让引入es6的html文件运行起来我们需要在一些前期的文章 注1 获得一些代码片段作为起点，生成本文的代码：
部分 webpack ，部分 ESLint，部分 Mocha
确保 ESLint 在 PyCharm 中的连接
npm start 和 npm test，还有 Mocha test 运行器
我们的 index.html 文件非常简单，这来自于 Webpack 相关的文章：
<html>
<head>
<title>ES6 Imports</title>
</head>
<body>
<h1>Incrementer</h1>
<scriptsrc="bundle.js"></script>
</body>
</html>
Webpack 的配置也是一样：
module.exports = {
entry:'./app.js',
output: {
path: __dirname,
filename:'bundle.js'
},
devtool:'source-map'
};
关于html里面怎么用ES6的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。
查看更多关于html里面怎么用ES6 html5和es6的详细内容...