反応：外部スクリプトのロードに関する問題

bugfix> javascript > 投稿

私の最初のReactプロジェクトに取り組んでいて、JSにとっては初めてのことですが、非常に基本的な問題に取り組んでいます。これをデバッグするためのベストプラクティスは何ですか？

create-react-app でアプリを作成しました外部スクリプトのロードに成功しません。驚くべきことに、これまでのところオンラインやドキュメントでヘルプを見つけることができませんでした。むしろ、これが問題であるという言及はありません。

public/index.html の下部 、私が書いた場合：

<script>
  console.log('Hello World!');
</script>

=> コンソール表示 'Hello World!' 、通常、すべて良い！

しかし、代わりに私がする場合：

<script type="text/babel" src="../src/js/helloworld.js"></script>

そして、 helloworld.js ファイルには console.log('Hello World!'); のみが含まれます

=> コンソールには何も表示されません！

どうやら、 type 「 text/babel" 」である必要がありますまたは、構文エラーが表示されます。

私は何を間違えていますか？

私のフォルダ構造は次のとおりです。

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── js
        └── helloworld.js

javascript

reactjs

回答 3 件

  • プロジェクトの作成に使用したボイラープレート（create-react-app）は、node.js開発環境を利用するため、ノードモジュールを作成することにより、その開発ワークフローに固執する必要があります。

    したがって、helloworld.jsをノードモジュールに変換する必要があります。

    exports.helloWorld = function() {
    console.log('Hello World!');
};

    次に、アプリケーションの他のモジュール（つまり、index.js）で使用します。

    import { helloWorld } from './js/helloWorld';
helloWorld(); // or call from within a React.js component

    node.jsモジュールの仕組みについて読む必要があります。

  • helloworld.js を移動した場合も機能させることができます   public 内のファイル   create-react-app が使用するサーバーとしてのフォルダー   public のすべてのアセットを提供します  フォルダーが src を提供しません 。ここにドキュメントがあります

    あなたの index.html で 

     <script type="text/javascript" src="js/helloworld.js"></script>

    プロジェクトに js を入れます  パブリック public/js/helloworld.js 内のフォルダー

    タイプは text/javascript である必要があります  ブラウザにファイルの解釈方法を知らせるためです。構文エラー、あなたが得ているのは、 create-react-app  ファイルが見つからない場合はindex.htmlをレンダリングし、ブラウザにはjavascriptではなくhtmlが表示されるため、エラー： Uncaught SyntaxError: Unexpected token <

    また、 create-react-app  複雑さを隠してしまい、舞台裏で何が起こるかをすべて理解するのが難しくなります。完全なツーリングシステムを所定の場所に移動する場合は、 npm run eject を実行できます  （ただし、ドキュメントを最初に読んでください:)

  • デバッガで[ネットワーク]タブを確認すると、実際には負荷 あなたのために。ただし、画面上の効果は表示されません。これは、create-react-appが機能する方法ではないためです。空のインデックスページを提供するのではなく、Reactアプリを挿入するdivを提供するように設定されています。このツールが機能する方法ではないため、インターネット上でこれを見つけることはできません。ドキュメントを読んで、それがどのように機能するのかを学び、あなたがやったことをとても幸せに思うでしょう。 :)

あなたの答え

関連記事