CDN-ReactとES Modulesの衝突における対応案を求めます．

前提・実現したいこと

CDN-Reactの.jsxファイルにおいて外部js/jsxファイルの関数等をHTMLを用いる方法以外でインポートしたい．

環境

npmを導入していない．
HTMLファイル内にCDNでReactを導入．

導入方法の制限

下記リンクにあるような以下に述べる方法は除く．
外部jsファイルから別の外部jsファイルの関数を呼び出したい． | teratail

上から順にscriptタグを並べていく方法．

HTML
1<script type="text/babel" src="export.jsx">
2<script type="text/babel" src="import.jsx">

HTMLタグのID属性等を指定してで取り込む方法．
jQueryを用いた方法．

HTML
1<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
2<script type="text/babel" src="import.jsx">

importJSX
1$.getScript("export.jsx");

試したこと

Browserify

npmによるビルドが必要だと感じ断念．

ES Modules

現状コレが一番解決に近そう．
しかしインポート側のscriptsタグにおいてCDN-Reactのためのtype=text/babelを指定してしまっているため，type=moduleと書けずにいる．

HTML
1<!doctype html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <title>React</title>
6        
7        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
8        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
9        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
10
11        <!--ここのtype属性を「module」に変更できないためES Modulesを導入できない．-->
12        <script type="text/babel" src="jsx/import.jsx"></script>
13    </head>
14    <body>
15        <div id="root"></div>
16    </body>
17</html>

修正による追加情報

使用ブラウザはChromeとしてください．

maisumakun

2019/03/06 00:34

対象ブラウザはどの程度を考えていますか？（そもそもES Moduleにネイティブ対応しているブラウザも限られます） https://caniuse.com/#feat=es6-module

KagenoMoheji

2019/03/06 06:55

maisumakunさん React勉強中ということもあるのでChromeをメインに見ていただいて大丈夫です．

行動規範の内容に同意します

回答1件

ベストアンサー

そもそも論ですが、Babelをブラウザ内で使うのは、

Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side.

とBabel公式に書かれるぐらいの使い方です。どうしても不可能な理由があるのでなければ、npmを導入して、ビルド環境を構築することをおすすめします。

投稿2019/03/06 00:37

maisumakun

総合スコア145183

KagenoMoheji

2019/03/06 07:01

回答ありがとうございます．ローカルでしたらnpm環境を組むことは可能ではありますが，公開しているサーバについて，レンタルサーバ(PHP)を使用しているので，サーバの内容を自由に変更できないというシチュエーションを含めて考えてのことでした．公式に書いてあるけど何か回避策で強行できないかなと思った次第ですがやはり厳しいのでしょうか…．