简体   繁体   English

JS:在客户端启用导出/导入(ES6 或使用 babel)?

[英]JS: enabling export/import on client side (ES6 or using babel)?

I want to export/import local files within an app directory:我想在应用程序目录中导出/导入本地文件:

My index.html :我的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 : actions.js

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

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

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

Now if I use javascript without babel, I will get:现在,如果我在没有 babel 的情况下使用 javascript,我将得到:

Uncaught SyntaxError: Unexpected token import

I use Chrome browser version 60 .我使用Chrome 浏览器版本 60 Shouldn't this version already support ES6?这个版本不应该已经支持 ES6 了吗? And by supporting, I should be able to use export/import?通过支持,我应该能够使用导出/导入?

I also tried with babel (using standalone babel loaded from index.html ).我也尝试过使用 babel(使用从index.html加载的独立 babel)。

Then I get this error:然后我得到这个错误:

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)

I understand that require does not exist on client side, but isn't that export/import (not NodeJS export) syntax for ES6?..我知道客户端不存在require ,但不是 ES6 的导出/导入(不是 NodeJS 导出)语法吗?

Do I need to resort to things like webpack for this to work?我是否需要求助于webpack类的东西才能工作?

According to this answer: Trying ES6 imports with Chrome but it doesn't seem to work you need to enable Experimental Web Platform flag in Chrome and use <script type="module" src="main.js"></script> .根据这个答案: Trying ES6 imports with Chrome 但它似乎不起作用,您需要在 Chrome 中启用Experimental Web Platform标志并使用<script type="module" src="main.js"></script> But using it, stops loading anything.但是使用它,停止加载任何东西。 It seems browser just ignores such type.似乎浏览器只是忽略了这种类型。 And even if this approach would work, then I guess I would not be able to use babel then, because it would use different type?即使这种方法可行,那么我想我也无法使用 babel,因为它会使用不同的类型?

PS According to this: http://2ality.com/2014/09/es6-modules-final.html#named-exports-several-per-module it should work.. PS据此:http: //2ality.com/2014/09/es6-modules-final.html#named-exports-several-per-module它应该可以工作..

import / export statements are now supported by 90+% of all browsers and will be continued in the future ( see this SO question ).现在90% 以上的浏览器都支持import / export语句,并将在未来继续使用( 请参阅此 SO 问题)。

How to use it如何使用它

In the module (myModule.js):在模块 (myModule.js) 中:

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

In index.html在 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这是一篇关于如何使用它的好文章

Chrome has achieved most of the es6 new features, except import / export has not yet achieved,for more detail: https://ruanyf.github.io/es-checker/ Chrome 已经实现了 es6 的大部分新特性,除了import / export还没有实现,更多细节: https ://ruanyf.github.io/es-checker/

If you don't want use webpack to compile files,try:如果你不想使用 webpack 编译文件,试试:

$ npm install --global babel-cli

and then:接着:

babel example.js -o compiled.js

finally,you will get the compiled files,which will support browsers。最后,你会得到编译后的文件,这些文件将支持浏览器。

plus,the key word require/exports/module.exports is a CommonJS specification,supported by Node.js.The file https://unpkg.com/babel-standalone@6.15.0/babel.min.js used the CommonJS specification, so it will be reported errors on the browser side另外,关键字require/exports/module.exports是 CommonJS 规范,由 Node.js 支持。文件https://unpkg.com/babel-standalone@6.15.0/babel.min.js使用了 CommonJS 规范,所以会在浏览器端报错

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM