書名： Mastering React Test：Driven Development
作者名： Daniel Irvine
本章字數： 344字
更新時間： 2021-06-24 14:45:06

Putting it all together with Webpack

Jest includes Babel, which transpiles all our code when it's run in the test environment. But what about when we're serving our code via our website? Jest won't be able to help us there.

That's where Webpack comes in, and we can introduce it now to help us, do a quick manual test:

Install Webpack using the following command:

npm install --save-dev webpack webpack-cli babel-loader

Add the following to the scripts section of your package.json:

"build": "webpack",

You'll also need to set some configuration for Webpack. Create the webpack.config.js file in your project root directory with the following content:

const path = require("path");
const webpack = require("webpack");

module.exports = {
 mode: "development",
 module: {
   rules: [{
     test: /\.(js|jsx)$/,
     exclude: /node_modules/,
     loader: 'babel-loader'}]}
};

This configuration works for Webpack in development mode. Consult the Webpack documentation for information on setting up production builds.

In your source directory, run the following commands:

mkdir dist
touch dist/index.html

Add the following content to the file you just created:

<!DOCTYPE html>
<html>
  <head>
    <title>Appointments</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="main.js"></script>
  </body>
</html>

You're now ready to run the build:

npm run build

You should see a bunch of output like this:

  Asset Size Chunks Chunk Names
main.js 764 KiB main [emitted] main
Entrypoint main = main.js
[./src/Appointment.js] 4.67 KiB {main} [built]
[./src/index.js] 544 bytes {main} [built]
[./src/sampleData.js] 726 bytes {main} [built]
 + 11 hidden modules

Open index.html in your browser and behold your creation:

The following screenshot shows the application once the Exercises are completed, and with added CSS and extended sample data. To include the CSS, you'll need to pull dist/index.html and dist/styles.css from the chapter-2 tag. The sample data can be found in src/sampleData.js, within the same tag. If you're choosing not to complete the Exercises, you can skip to that tag now.

As you can see, we've only got a little part of the way to fully building our application. The first few tests of any application are always the hardest and take the longest to write. We are now over that hurdle, so we'll move quicker from here onward.

官术网_书友最值得收藏!

Mastering React Test：Driven Development

Putting it all together with Webpack