记录不通过webpack而直接使用import导入模块，在浏览器上执行es6的语法的过程

最新推荐文章于 2024-05-09 00:35:19 发布

mlight_月光

最新推荐文章于 2024-05-09 00:35:19 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： es6 chrome 前端

本文链接：https://blog.csdn.net/qq_35899220/article/details/106447371

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

最近准备写个react的小项目，文档之前已经看完了，按部就班使用的webpack打包，一切正常。
今天脱档写代码之前，突然想起脱离了打包工具，支持es6的浏览又是如何直接执行es6的语法，以及需要哪些工具呢？借此强化对一些js基础的了解与记忆。

es6支持的import(module)语法的浏览器的情况。https://caniuse.com/#search=module
在这里插入图片描述
使用的chrome浏览器，检查版本chrome://version 发现符合。

目录结构
在这里插入图片描述
浏览器加载es6的语法使用标签

<script typ="module" > </script>

这个标签内部不允许有注释的内容
在这里插入图片描述

先用代码块加载一个模块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="module">
			import { counter, name} from 'file:///D:/wamp/wamp/www/react/test1/supportEs6Test/counter.js';
			console.log(name);
		</script>
	</body>
</html>

counter.js

export function counter(count=100){
	return ++count;
}
export const name="import成功";

使用文件路径（会调用file协议）直接打开html文件，存在跨域的问题
这里有解释
在这里插入图片描述
所以我们用服务器加载文件

nodejs建立一个server.js文件后，本目录运行 node server.js

var express = require('express');
var path = require('path');

var app = express();

//设置静态路径
app.use(express.static(path.join(__dirname,'/')));

app.get('/',function(request, response){
	console.log('主页get请求');
	response.sendFile(path.join(__dirname, 'index.html'));
})

var server = app.listen(8888,'0.0.0.0', function(){
	var host = server.address().address;
	var port = server.address().port;
	console.log('应用实例，访问地址为http://%s:%s', host, port);
})

在这里插入图片描述
显示成功

或者使用文件加载

成功

参考文章：

Module 的加载实现【第一部分】
浅谈FIle协议与Http协议及区别

mlight_月光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
记录不通过webpack而直接使用import导入模块，在浏览器上执行es6的语法的过程

最近准备写个react的小项目，文档之前已经看完了，按部就班使用的webpack打包，一切正常。今天脱档写代码之前，突然想起脱离了打包工具，支持es6的浏览又是如何直接执行es6的语法，以及需要哪些工具呢？借此强化对一些js基础的了解与记忆。本人是新手，故本篇记录也只能帮助到新手。目录结构浏览器加载es6的语法使用标签<script typ="module" > </script>这个标签内部不允许有注释的内容先用代码块加载一个模块<!DOCTYPE.
复制链接

扫一扫