首頁猿問在...

在 babel-standalone 中使用 ES 模塊

JavaScript

繁星淼淼 2023-03-03 10:45:45

引用 babel 文檔https://babeljs.io/docs/en/babel-standalone#usage：“如果你想使用你的瀏覽器對 ES 模塊的原生支持，你通常需要在你的腳本標(biāo)簽上設(shè)置一個 type="module" 屬性。使用@babel/standalone，設(shè)置一個 data-type="module" 屬性來代替“但是出于某種原因，當(dāng)包含我的主要 index.js 文件（使用導(dǎo)入導(dǎo)入其他 js / jsx 文件）時，babel 似乎正在將我的導(dǎo)入語句轉(zhuǎn)換為 require 語句，因為我得到 ReferenceError: require is not defined。我發(fā)現(xiàn)解決這個問題的唯一方法是使用 transform-modules-umd 插件并將我所有的 js 文件包含為腳本。不確定這是否是 data-type="module" 不起作用的錯誤，或者我是否遺漏了什么。這些是我在 index.html 中的腳本標(biāo)簽<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script src="index.js" type="text/babel" data-type="module"></script>謝謝您的幫助

查看完整描述

2 回答

墨色風(fēng)雨

TA貢獻(xiàn)1853條經(jīng)驗獲得超6個贊

對于（我的）未來參考，這是一個完整的工作示例。

你可以將下面的代碼放入 index.html 并在網(wǎng)絡(luò)瀏覽器中運行它，你將擁有一個使用 JSX 的 React 應(yīng)用程序。

來源： https: //codesandbox.io/s/dikoh?file =/index.html

<!DOCTYPE html>

<html>

<head>

<title>Static Template</title>

</head>

<body>

import {

ChakraProvider,

Box,

Text

} from "https://cdn.skypack.dev/@chakra-ui/react";

import React, { useRef } from "https://cdn.skypack.dev/react";

import ReactDOM from "https://cdn.skypack.dev/react-dom";

const MyText = ({ color, ...props }) => {

return <Text fontWeight="bold" as="span" {...props} />;

};

function Foo() {

return (

<div>

Foo

</div>

);

}

function App() {

return (

<Box>

Hello <MyText>Skypack</MyText>

<Foo/>

</Box>

);

}

ReactDOM.render(

<App />

</ChakraProvider>,

document.getElementById("main")

);

</script>

</body>

</html>

反對回復(fù) 2023-03-03

翻過高山走不出你

TA貢獻(xiàn)1875條經(jīng)驗獲得超3個贊

Amareis 在 babel 的 github 頁面上回答了我的問題：https://github.com/babel/babel/discussions/12059

問題是 babel 不會轉(zhuǎn)譯通過 ES 模塊導(dǎo)入的模塊，它們必須明確包含為腳本，并將“type”設(shè)置為“text/babel”。所以通過 index.js 腳本中的 ES 模塊導(dǎo)入的 JSX 文件是在 index.js 被 babel 轉(zhuǎn)譯后導(dǎo)入的，而不是它自己轉(zhuǎn)譯。

還得到了一個建議，為了開發(fā)目的，使用 service worker 獲取并執(zhí)行我的腳本。babel-standalone 在獲取后轉(zhuǎn)換它們

反對回復(fù) 2023-03-03