ReactJsでweb-packを使用する必要があるのはなぜですか？

debugcn 投稿 Dev

SAnandhaprabhu

なぜwebpackを使用する必要があるのですか？プラグインをバンドルして継承するためだけに最小化して圧縮するためです。Webアプリケーション開発でwebpackが果たすすべての主要な役割は何ですか？

アナンド

webpackの用途は次のとおりです。

JSX構文（Javascript内のHTMLタグ）をJSにトランスパイルします
ES6構文（矢印関数、spead演算子など）をブラウザーでサポートされているバージョンのJavascriptにトランスパイルします。
コードをインポート可能な個別のファイル（モジュール）に分割することをお勧めします。Webpackは、これらすべてのファイルを本番環境で使用するために1つのJSファイルに「バンドル」します。
バンドル時に、minify、uglifyなどの最適化を実行することもできます。

ところで、webpackを使用する必要はありません。例えば、

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First React Example</title>
  </head>
  <body>
    <div id="greeting-div"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/cjs/react-dom-server.browser.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script type="text/babel">
      var Greeting = React.createClass({
        render: function() {
          return (
            <p>Hello, Universe</p>
          )
        }
      });

      ReactDOM.render(
        <Greeting/>,
        document.getElementById('greeting-div')
      );
    </script>
  </body>
</html>

ここでは、JSXコードがオンザフライでJSに「トランスパイル」されています。ただし、これは実稼働での使用ではあまり効率的ではありません。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]