活久见： 原来 Chrome 浏览器支持 Import from 语法

最新推荐文章于 2022-04-04 17:31:10 发布
最新推荐文章于 2022-04-04 17:31:10 发布
阅读量379 收藏 1
点赞数
文章标签： 运维
原文链接：http://www.cnblogs.com/CyLee/p/10158883.html
版权

需要满足以下三个条件：

1、高版本的Chrome ，总而言之越新越好……，其他浏览器请参考：https://caniuse.com/#search=import

2、必须在服务器环境下才能运行，譬如apache或者nginx，或者大部分语言都能开启的服务环境（我这里用phpstudy的Nginx环境来测试）

3、需要在 script 中加入 type = 'module'

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app"></div>
</body>
<script type='module'>
    import test from './test.js'
    console.log(20181221204836, test) // {a: 123 } 
</script>
</html>

test.js

 

export default {
    a: 123
}

 

 

效果图如下：

 

 

 

转载于:https://www.cnblogs.com/CyLee/p/10158883.html

dicha7140
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
chrome插件开发时使用import
Powerful_Green的博客
01-27 1916
本文提供了一种在chrome插件开发时，解决import时报cannot use import statement outside a module的办法
chrome中直接使用import
赵天铭的博客
06-22 4992
现在我们在开发项目时都是基于构建工具（像webpack）上进行开发，所以在使用import时得心应手。 但今天在chrome中直接使用import时，发现不知道如何使用？ chrome中直接使用import 三个条件： 浏览器版本需要支持，浏览器的支持情况： 使用<script type="module"> 必须在服务器环境下才运行（可以通过全局下载npm包http-...
如何让浏览器支持 import 和export语法
weixin_34292402的博客
06-04 3904
浏览器现在都不支持import和export语法，也许有人会说用babel啊，我万能的babel啥事不能干，错了，babel只是一个翻译器， Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Obje...
chrome中直接使用es6的import
码码砖
10-12 6597
查询一下chrome对import/export的支持情况： 我的chrome版本是69的，发现可以支持。写个小demo测试一下 test.html &amp;lt;script type=&quot;module&quot;&amp;gt; import {foo, num} from './test.js'; console.log(num); console.log(foo()); &amp;lt;/script...
import和export在浏览器中的使用方式
ExtremeExplorer的博客
04-04 4321
一般情况下，import 和 export 的使用通常是在 webpack、Vite 等构建工具中已模块的形式使用，而想在浏览器中直接使用，则需要通过一下方式：
第四节：教你如何快速让浏览器兼容ES6特性
qq_24520459的博客
06-08 2096
写在正文前，本来这一节的内容应该放在第二节更合适，因为当时就有同学问ES6的兼容性如何，如何在浏览器兼容ES6的特性，这节前端君会介绍一个抱砖引玉的操作案...
chromedriver以及与之配套的chrome浏览器
02-02
标题中的“chromedriver”和“chrome浏览器”是用于自动化网页浏览和测试的重要工具，它们在IT行业中特别是Web开发和自动化测试领域广泛应用。这里主要讲解它们的功能、如何配合使用，以及如何在Python环境中进行...
chromedriver谷歌浏览器驱动对应chrome版本：120.0.6046.0系统环境：win64
最新发布
01-31
from selenium import webdriver # 创建Chrome实例，指定ChromeDriver的路径 driver = webdriver.Chrome(executable_path='path/to/chromedriver.exe') # 访问网址 driver.get('https://www.example.com') # 操作...
selenium+python自动化测试之使用webdriver操作浏览器的方法
09-19
### Selenium + Python 自动化测试之使用 WebDriver 操作浏览器的方法 #### 一、WebDriver简介 WebDriver 是 Selenium 从 2.0 版本开始集成的一个重要组件，它为用户提供了一个简单且直观的方式来控制浏览器，从而...
ReadableLogs：用于以更易读的方式格式化浏览器控制台日志的实用程序（突出显示更改，彩色JSON语法）
02-18
实用程序以更易读的方式（突出显示更改，使JSON语法着色）格式化浏览器控制台的日志。 用例：实用程序允许在控制台日志中突出显示JSON格式的数据，以提高可读性。 控制台中默认显示对象的区别-实用程序显示对象的...
控制浏览器大小，控制浏览器前进后退刷新操作，webdriver的常用方法以及css高级语法
12-25
from selenium import webdriver driver = webdriver.Firefox() # 或者使用其他浏览器，如 webdriver.Chrome() driver.set_window_size(800, 600) ``` 接下来，我们来看看如何控制浏览器的前进和后退操作。...
如何让浏览器支持ES6中的import和export语法
qq_38017417的博客
05-12 4903
我们都知道现在浏览器对于ES2015(ES6)的语法支持还不是很强, 即便是使用Firefox和Chrome浏览器, 如果版本比较低的话, 可能还只能支持一部分语法, 因此想要使得开发人员编写出来的ES6语法能够正常地在各个浏览器运行的话, 还是需要将编写的JS文件通过一些工具编译成ES5语法才行, 那么这个工具就是babe。然而, Babel默认只转换新的JavaScript句法（syntax）...
ES6（JavaScript）中的模块module如何正常运行（谷歌浏览器测试，有些浏览器不支持！）
weixin_43343144的博客
01-04 5966
关于ES6模块化的权威参考文档：https://www.w3cschool.cn/ecmascript/m6yz1q60.html 浏览器使用ES6模块的语法如下。 &lt;script type="module" src="foo.js"&gt;&lt;/script&gt; 上面代码在网页中插入一个模块foo.js，由于type属性设为module，所以浏览器知道这是一个ES6模块。...
chrome浏览器启用es6语法支持,初次体验浏览器端模块化加载
火焰
08-11 1万+
参照：http://es6.ruanyifeng.com/#docs/module-loader 注意：最新版本的chrome浏览器已支持module语法，需要在web服务器环境下运行！ 设置浏览器启用es6语法功能： 1.在浏览器的url中输入：chrome://flags/ 设置下面选项为enable，重启浏览器。 准备代码： 2.index.html &lt;!DOCTY...
关于vue项目在低版本浏览器中不支持ES6的解决方案
热门推荐
Kris的博客
11-01 1万+
原因：低版本浏览器内核版本太低，无法解析 ES2015最新的一些语法。 babel是一个转译器，把同种语言的高版本规则翻译成低版本规则 一般搭建项目时webpack会在最外层配置一个.babelrc文件用于默认解析ES2015（es6）中的特殊语法（例如： let，const，class等） 而babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterato...
【译】你不知道的 Chrome 调试工具技巧 第二十一天：Snippets(代码块)
weixin_34066347的博客
12-28 3215
特别声明 本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24 篇，一直更新到 12 月 24 日 版权归原作者所有。 作者在 Twitter 上推荐我们的中文翻译啦,截图在最后 译者在翻译前已经和作者沟通得到了翻译整个系列的授权。 为了不影响大家阅读，授权的记录在这里 正文 在马上就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，关于如何...
HTML Imports
mychirs的专栏
09-15 4302
为什么需要导入？ 先想想你在 web 上是如何加载不同类型的资源。对于 JS，我们有 。 应该是 CSS 的首选。图片可以用 。视频则有 。音频，…… 你明白我在说什么了吧！ web 上绝大部分的内容都有简单明了的加载方式。可对于 HTML 呢？下面是可选的几种方案：  - 可用但笨重。iframe 中的内容全部存在于一个不同于当前页的独立上下文中。这是个很棒的特性，但也为开发
vue判断当前浏览器是否支持
09-07
### 回答1： Vue.js中可以使用第三方库"bowser"来判断当前浏览器是否支持。可以在main.js中导入bowser库，然后在Vue实例中使用bowser.check()方法来进行判断。 例如： ``` import bowser from 'bowser' if (bowser.check({ chrome: '73' })) { console.log('The browser is Chrome 73 or newer') } ``` 也可以直接使用bowser.chrome，bowser.safari等属性来判断当前浏览器是否为chrome或safari等。 例如： ``` if (bowser.chrome) { console.log('The browser is Chrome') } ``` ### 回答2： 在Vue中，我们可以通过判断navigator.userAgent中的信息来判断当前浏览器是否支持。navigator.userAgent是一个包含有关浏览器和操作系统的信息的只读字符串。 首先，我们可以创建一个包含支持的浏览器信息的数组，例如["Chrome", "Firefox", "Safari", "Opera", "Edge"]。 然后，我们可以通过使用数组的some方法来检查navigator.userAgent是否包含支持的浏览器信息。如果包含其中一个浏览器信息，则返回true，表示当前浏览器支持，否则返回false，表示当前浏览器不支持。 具体的代码实现如下： ```javascript function isBrowserSupported() { const supportedBrowsers = ["Chrome", "Firefox", "Safari", "Opera", "Edge"]; const userAgent = navigator.userAgent; return supportedBrowsers.some(browser => userAgent.indexOf(browser) > -1); } // 调用isBrowserSupported函数来检查当前浏览器是否支持 if (isBrowserSupported()) { console.log("当前浏览器支持"); } else { console.log("当前浏览器不支持"); } ``` 请注意，这种方法只是对浏览器进行简单的判断，不能保证100%准确，因为用户可以通过修改userAgent来伪装浏览器信息。因此，如果您需要更精确的浏览器支持判断，可以考虑使用现有的浏览器检测库。 ### 回答3： Vue本身并没有提供直接的方法来判断当前浏览器是否支持。但是我们可以借助于现有的JavaScript方法来判断。 一种常用的方法是使用User Agent字符串来判断浏览器类型。可以通过`navigator.userAgent`获取到当前浏览器的User Agent字符串。 我们可以根据不同浏览器的User Agent字符串特征来判断是否支持Vue。以下是一些常见的浏览器User Agent字符串特征： - Chrome: "Chrome" - Firefox: "Firefox" - Safari: "Safari" - Edge: "Edge" - Internet Explorer: "MSIE" 或 "Trident" 我们可以使用正则表达式来匹配User Agent字符串来判断浏览器类型。以下是一个简单的例子： ```javascript const isSupportedBrowser = () => { const userAgent = navigator.userAgent; const supportedBrowsers = /(Chrome|Firefox|Safari|Edge|MSIE|Trident)/i; return supportedBrowsers.test(userAgent); }; if (isSupportedBrowser()) { // 当前浏览器支持Vue } else { // 当前浏览器不支持Vue } ``` 当然，这只是一种简单的判断方式，并不能 100% 确定浏览器是否能够支持Vue。此外，浏览器的User Agent字符串也可以被篡改。因此，更加可靠的判断浏览器是否支持Vue的方式是通过检测浏览器是否支持一些特定的JavaScript特性和API，比如ES6的语法支持、DOM和CSSOM的相应API等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值