ECMAScript Cookbook

上QQ阅读APP看书，第一时间看更新

上一章目录下一章

How to do it...

Open your command-line application and navigate to the directory containing the 02-creating-client-bundles package.
Start the Python HTTP server.
Create a file named index.html (copied from the Nesting modules under a single namespace recipe in Chapter 1, Building with Modules):

<html> 
  <head> 
    <meta charset='UTF-8' /> 
  </head> 
  <body> 
    <h1>Open your console.</h1> 
    <script type="module"> 
      import { main } from './main.js'; 
      main(); 
    </script> 
  </body> 
</html>

Add a nomodule script tag to the body after the existing module in the <script> tag:

  <body> 
    <h1>Open your console.</h1> 
    <script type="module"> 
      import { main } from './main.js'; 
      main(); 
    </script> 
    <script nomodule type="text/javascript"src="bundle.js"></script> 
  </body>

Run the webpack build command:

    ./node_modules/.bin/webpack --config webpack.config.js

Open your ES module-compatible browser, open the Developer tools to the Network tab, and visit the URL:
http://localhost:8000/.
You should see the individual files loaded by the browser:

Open a browser that isn't compatible with ES modules. Open the Developer tools to Network and visit the URL:
http://localhost:8000/.

You should see the bundle.js file loaded instead:

上一章目录下一章