javascript - JS : enabling export/import on client side (ES6 or using babel)?

转载作者：行者123 更新时间：2023-11-29 21:02:20

26

4

我想在应用程序目录中导出/导入本地文件:

我的 index.html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<script type="text/babel" src="main.js"></script>
</body>
</html>

actions.js :

export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

main.js (从 index.html 加载):

import {ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER} from 'actions'

现在如果我在没有 babel 的情况下使用 javascript，我将得到:

Uncaught SyntaxError: Unexpected token import

我使用 Chrome 浏览器版本 60。这个版本不应该已经支持 ES6 了吗？通过支持，我应该能够使用导出/导入？

我还尝试使用 babel(使用从 index.html 加载的独立 babel)。

然后我得到这个错误:

Uncaught ReferenceError: require is not defined
    at <anonymous>:4:16
    at n (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27049)
    at r (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27558)
    at e.src.i.(anonymous function).error (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27873)
    at XMLHttpRequest.i.onreadystatechange (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27316)

我明白 require在客户端不存在，但不是 ES6 的导出/导入(不是 NodeJS 导出)语法吗？..

我需要求助于 webpack 之类的东西吗？这行得通吗？

根据这个答案:Trying ES6 imports with Chrome but it doesn't seem to work你需要启用 Experimental Web Platform在 Chrome 中标记并使用 <script type="module" src="main.js"></script> .但是使用它，停止加载任何东西。似乎浏览器只是忽略了这种类型。即使这种方法可行，我想那时我也无法使用 babel，因为它会使用不同的类型？

附言根据这个:http://2ality.com/2014/09/es6-modules-final.html#named-exports-several-per-module它应该工作..

最佳答案

90+% of all browsers 现在支持

import/export 语句并将在未来继续 ( see this SO question )。

如何使用

在模块 (myModule.js) 中:

const myVar = 'Hello !!';
export {
    myVar
}

在 index.html 中

<script type="module">
    import myVar from './myModule.js'
    console.log(myVar) // output 10
</script>

This is a good article on how to use it

关于javascript - JS : enabling export/import on client side (ES6 or using babel)?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45904907/

26

4

0

文章推荐： android - 静态 fragment

文章推荐： javascript - 在express中设置ejs的view文件夹的查找路径

文章推荐： javascript - 通过 ref 访问自定义组件方法无法按预期工作

文章推荐： mysql - SOLR像mysql一样按field_in_set排序

client - Eliom错误: {client{}}
我遇到了一个错误，我不知道如何解决。我有以下代码(来自 Eliom Graffiti 教程)，我正在尝试使用 make test.byte 进行测试。 open Eliom_content.Html5
django - Django TestCase 中的 client 和 client.Client 到底有什么区别？
我阅读文档的理解是这样的: 客户端是测试用例的子类。当我们运行 manage.py test 时，会为每个以“test_”开头的方法创建一个 SimpleTest 类的实例(它继承自 TestCase
python-3.x - Python套接字: how to detect and list connected clients in server in the other clients and how to update it when a client disconnected?
我已经编写了一个用于接收多个客户端的服务器，它可以分别与客户端通信。在这里，我可以列出服务器中已连接的客户端，但是当客户端断开连接时，它不会从服务器中删除客户端。 Server.py import s
apollo-client - Apollo Client 中的轮询与订阅？
我正在制作一个社交网站。当任何用户在站点上更新或创建新内容时，我需要查看站点的任何其他用户来查看更改更新。我有一些需要低延迟的评论，因此建议为此订阅。我也有事件，但这些不需要这么低的延迟。每 10
apollo-client - Apollo Client 中的乐观响应与更新？
我想在突变后使用乐观 UI 更新:https://www.apollographql.com/docs/react/basics/mutations.html 我对“乐观响应”和“更新”之间的关系感到
python - 本地使用 dask : to Client() or not to Client()?
我想了解 Dask 在本地机器上的使用模式。具体而言，我有一个适合内存的数据集我想做一些 pandas 操作分组依据... 日期解析等等 Pandas 通过单核执行这些操作，这些操作对我来说
apollo-client - 在 Apollo Client 的第二个查询中使用第一个查询的结果？
我使用 Apollo、React 和 Graphcool。我有一个查询来获取登录的用户 ID: const LoginServerQuery = gql` query LoginServerQ
java - 与NSD连接的Android设备，如何使用套接字(Client-Client)发送消息？
在本指南的帮助下，我最近在几个设备的应用程序中设置了 P2P 通信:http://developer.android.com/training/connect-devices-wirelessly/n
twilio - Client.getConversationByUniqueName 和 Client.getConversationBySid 找不到其他用户创建的对话
注意:我在节点项目中使用@twilio/conversations 1.1.0 版。我正在从使用可编程聊天过渡到对话。我看到对 Client.getConversationByUniqueName
c# - : Azure service client and device client 之间的区别
我对服务客户端和设备客户端库有点困惑。谁能解答我对此的疑问。问题:当我通过 deviceClient 发送数据时，我无法接收数据，但当我使用服务客户端发送数据时，相同的代码可以工作。现在，xamar
c# - : Azure service client and device client 之间的区别
我对服务客户端和设备客户端库有点困惑。谁能解答我对此的疑问。问题:当我通过 deviceClient 发送数据时，我无法接收数据，但当我使用服务客户端发送数据时，相同的代码可以工作。现在，xamar
java - OAuth2 : How to generate client id and client secret?
假设我有一个简单的应用程序。如何设置 OAuth2 以允许其他应用程序访问我的应用程序的某些部分。例如，当开发人员想要使用 Facebook API 时，他们会使用 Facebook API 用户
javascript - import().Client 类型的参数不可分配给 import().Client 类型的参数
我有两个模块: 在一个模块中，我从另一个模块run 中引用了一个函数: @myorg/server import { Client } from '.' import { Middleware } f
node.js - NodeJS : Client to Client via Server
我在通过服务器从客户端向客户端发送数据时遇到了一些问题(以避免监听客户端上的端口)。我有一个这样的服务器: var net = require("net"); var server = net.cr
python - 为什么 django.test.client.Client 不让我登录
我正在使用 django.test.client.Client 来测试用户登录时是否显示某些文本。但是，我的 Client 对象似乎并没有让我保持登录状态。如果使用 Firefox 手动完成，则此测
C# 套接字 : Client Mishandle 'a' as the Client's id
有两个我制作的程序无法运行。有服务器和客户端。服务器通过给用户一个 ID(从 0 开始)来接受许多客户端。服务器根据服务器的 ID 将命令发送到特定的客户端。 (示例:200 个客户端连接到 1 个服
advanced-rest-client - 重新安装 Advanced Rest Client 时出现问题
今天，我在 Windows 10 的“程序和功能”列表中看到了 2 个不同版本的 ARC，因此我选择卸载旧版本，因为我需要一些空间。在卸载结束时，它们都消失了! 所以，我从 https://insta
C : "same file descriptors of all client connections" (client server programming)
在每个新的客户端连接上 fork 服务器进程不同的进程(服务器的其他子进程，即 exec)无法识别在 fork 子进程中使用相同 fd 的客户端。如何在其他进程上区分客户端？如果文件描述符为新
python - boto3.Session().client 和 boto3.client 有什么区别？
a和b有什么区别？ >>> import boto3 >>> a = boto3.Session().client("s3") >>> b = boto3.client("s3") >>> a ==
python - boto3.Session().client 和 boto3.client 有什么区别？
a和b有什么区别？ >>> import boto3 >>> a = boto3.Session().client("s3") >>> b = boto3.client("s3") >>> a ==

首页

博学

6Ren·AI

商城

javascript - JS : enabling export/import on client side (ES6 or using babel)?

如何使用