JS：在客戶端啟用導出/導入（ES6 或使用 babel）？

Question

我想在應用程序目錄中導出/導入本地文件：

我的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 但它似乎不起作用，您需要在 Chrome 中啟用Experimental Web Platform標志並使用<script type="module" src="main.js"></script> 。 但是使用它，停止加載任何東西。 似乎瀏覽器只是忽略了這種類型。 即使這種方法可行，那么我想我也無法使用 babel，因為它會使用不同的類型？

PS據此：http: //2ality.com/2014/09/es6-modules-final.html#named-exports-several-per-module它應該可以工作..

Answer 1

現在90% 以上的瀏覽器都支持import / export語句，並將在未來繼續使用（請參閱此 SO 問題）。

如何使用它

在模塊 (myModule.js) 中：

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

在 index.html 中

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

這是一篇關於如何使用它的好文章

Answer 2

Chrome 已經實現了 es6 的大部分新特性，除了import / export還沒有實現，更多細節： https ://ruanyf.github.io/es-checker/

如果你不想使用 webpack 編譯文件，試試：

$ npm install --global babel-cli

接着：

babel example.js -o compiled.js

最后，你會得到編譯后的文件，這些文件將支持瀏覽器。

另外，關鍵字require/exports/module.exports是 CommonJS 規范，由 Node.js 支持。文件https://unpkg.com/babel-standalone@6.15.0/babel.min.js使用了 CommonJS 規范，所以會在瀏覽器端報錯

JS：在客戶端啟用導出/導入（ES6 或使用 babel）？

問題描述

2 個解決方案

解決方案1
3 2018-07-07 19:12:41

如何使用它

解決方案2
2 已采納 2017-08-27 13:42:52

JS：在客戶端啟用導出/導入（ES6 或使用 babel）？

問題描述

2 個解決方案

解決方案1 3 2018-07-07 19:12:41

如何使用它

解決方案2 2 已采納 2017-08-27 13:42:52

解決方案1
3 2018-07-07 19:12:41

解決方案2
2 已采納 2017-08-27 13:42:52