BETA

ExpressをWebpackでバンドルする その2

投稿日:2018-12-23
最終更新:2018-12-23

前回の記事 ExpressをWebpackでバンドルする その1

記事に従ってやってみた。

Creating a Node Express-Webpack App with Dev and Prod Builds を翻訳しながら進める。(google翻訳頼みのため間違ってたら指摘ください)

原文にないコメントは引用で書きます。

Step 4: DevとProdビルドへのアプリケーションの分離(Seperate App into Dev and Prod Builds)

上記(Step3の成果物)は一般的な出発点で、基本的なアプリケーションに必要なものをほとんどが揃っていますが、DevとProdで異なる技術を使っていきます。
たとえば、Base64でエンコードされた画像をProdビルドのCSSファイルに直接取り込むことができますが、Devビルドでは通常の画像ファイル形式にします。また、Devモジュールのみでホットモジュールリロードを有効にし、Prodではないことを確認します。

まずは webpack.config.jswebpack.dev.config.jswebpack.prod.config.js に分割しましょう。
また、 ./src/server/server.jsserver-dev.jsserver-prod.js に分割します。彼らはすべて瞬時に同じコードを持つことができます - 私たちはすぐにそれを変更します。

そのため、ディレクトリ構造は次のようになります(影響を受けるファイルのみ)

src  
    server  
        server-dev.js  
        server-prod.js  
webpack.dev.config.js  
webpack.prod.config.js  
webpack.server.config.js  

NOTE:
すべてを1つのファイルにまとめるためのスマートな方法を見つけるのではなく、すべてを自分のファイルに分割する理由は、これが私の個人的なスタイルだということです。私は自分のプロジェクトと私のコードで非常に宣言的であることが好きです - 私は何をしようとしているかについて過度に明白であると言う人もいます。これにより、プロジェクトに戻る必要があるときに、私の初期の意図が後から
容易に理解することができます。

次に、package.jsonスクリプトをそれに応じて更新しましょう。
Unix系OS
package.json

"scripts": {  
  "buildDev": "rm -rf dist && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js",  
  "buildProd": "rm -rf dist && webpack --mode production --config webpack.server.config.js && webpack --mode production --config webpack.prod.config.js",  
  "start": "node ./dist/server.js"  
},  

Windowsの場合
package.json

"scripts": {  
  "buildDev": "(if exist dist rd dist /s /q) && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js",  
  "buildProd": "(if exist dist rd dist /s /q) && webpack --mode production --config webpack.server.config.js && webpack --mode production --config webpack.prod.config.js",  
  "start": "node ./dist/server.js"  
},  

前述したように、server-dev.jsserver-prod.jsは同じコードを持ちます。
webpack.server.config.jsを次のように変更してみましょう。
webpack.server.config.js

const path = require('path')  
const webpack = require('webpack')  
const nodeExternals = require('webpack-node-externals')  
module.exports = (env, argv) => {  
  const SERVER_PATH = (argv.mode === 'production') ?  
    './src/server/server-prod.js' :  
    './src/server/server-dev.js'  
return ({  
    entry: {  
      server: SERVER_PATH,  
    },  
    output: {  
      path: path.join(__dirname, 'dist'),  
      publicPath: '/',  
      filename: '[name].js'  
    },  
    target: 'node',  
    node: {  
      // Need this when working with express, otherwise the build fails  
      __dirname: false,   // if you don't put this is, __dirname  
      __filename: false,  // and __filename return blank or /  
    },  
    externals: [nodeExternals()], // Need this to avoid error when working with Express  
    module: {  
      rules: [  
        {  
          // Transpiles ES6-8 into ES5  
          test: /\.js$/,  
          exclude: /node_modules/,  
          use: {  
            loader: "babel-loader"  
          }  
        }  
      ]  
    }  
  })  
}  

ここでは、Webパッケージ4の良さを使って、configファイルがargvをパラメータとして受け取る関数をexportできるようにしています。webpackコマンドがCLIから呼び出された mode(development またはproduction)を argv のプロパティに持っています。 argv.mode を使用して、使用するサーバーファイル(server-dev.js または server-prod.js )を決定します。

webpackのコマンドの--modeで動的にサーバーのビルドファイル(server-dev.js またはserver-prod.js )を分けているようです。下の例だと--mode development

webpack --mode development --config webpack.server.config.js  

この段階では、すべてがうまくいくはずです。npm run buildDevを実行後にnpm startをするとブラウザにソースコードが表示されます。(ブラウザのDev Tools Sourcesタブ- main.js) これはnpm run buildProd実行後にnpm startするのと大きく異なります。--mode production を指定してWebpack4を実行するとあなたのコードはminifyとuglifyされます。Woot!

ここはかなり意訳しました。

さて、ビルド固有の機能をDevとProdに適用して、configファイルとserverファイルの分離にポイントがあるようにしましょう。
WebpackにはCSSミニファイアがありませんので、私たちは独自のものをインストールして使用します。これにより、イメージをBase64にエンコードし、前述のようにCSSファイルに直接配置します。

npm install --save-dev mini-css-extract-plugin uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin  

webpack.prod.config.jsの更新されたコードは次のとおりです。
webpack.prod.config.js

const path = require("path")  
const HtmlWebPackPlugin = require("html-webpack-plugin")  
const MiniCssExtractPlugin = require("mini-css-extract-plugin")  
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")  
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");  
module.exports = {  
  entry: {  
    main: './src/index.js'  
  },  
  output: {  
    path: path.join(__dirname, 'dist'),  
    publicPath: '/',  
    filename: '[name].js'  
  },  
  target: 'web',  
  devtool: '#source-map',  
  // Webpack 4 does not have a CSS minifier, although  
  // Webpack 5 will likely come with one  
  optimization: {  
    minimizer: [  
      new UglifyJsPlugin({  
        cache: true,  
        parallel: true,  
        sourceMap: true // set to true if you want JS source maps  
      }),  
      new OptimizeCSSAssetsPlugin({})  
    ]  
  },  
  module: {  
    rules: [  
      {  
        // Transpiles ES6-8 into ES5  
        test: /\.js$/,  
        exclude: /node_modules/,  
        use: {  
          loader: "babel-loader"  
        }  
      },  
      {  
        // Loads the javacript into html template provided.  
        // Entry point is set below in HtmlWebPackPlugin in Plugins   
        test: /\.html$/,  
        use: [  
          {  
            loader: "html-loader",  
            options: { minimize: true }  
          }  
        ]  
      },  
      {  
        // Loads images into CSS and Javascript files  
        test: /\.jpg$/,  
        use: [{loader: "url-loader"}]  
      },  
      {  
        // Loads CSS into a file when you import it via Javascript  
        // Rules are set in MiniCssExtractPlugin  
        test: /\.css$/,  
        use: [MiniCssExtractPlugin.loader, 'css-loader']  
      },  
    ]  
  },  
  plugins: [  
    new HtmlWebPackPlugin({  
      template: "./src/html/index.html",  
      filename: "./index.html"  
    }),  
    new MiniCssExtractPlugin({  
      filename: "[name].css",  
      chunkFilename: "[id].css"  
    })  
  ]  
}  

webpack.dev.config.jsは以前と同じままです。
webpack.dev.config.js

const path = require("path")  
const webpack = require('webpack')  
const HtmlWebPackPlugin = require("html-webpack-plugin")  
module.exports = {  
  entry: {  
    main: './src/index.js'  
  },  
  output: {  
    path: path.join(__dirname, 'dist'),  
    publicPath: '/',  
    filename: '[name].js'  
  },  
  target: 'web',  
  devtool: '#source-map',  
  module: {  
    rules: [  
      {  
        test: /\.js$/,  
        exclude: /node_modules/,  
        loader: "babel-loader",  
      },  
      {  
        // Loads the javacript into html template provided.  
        // Entry point is set below in HtmlWebPackPlugin in Plugins   
        test: /\.html$/,  
        use: [  
          {  
            loader: "html-loader",  
            //options: { minimize: true }  
          }  
        ]  
      },  
      {   
        test: /\.css$/,  
        use: [ 'style-loader', 'css-loader' ]  
      },  
      {  
       test: /\.(png|svg|jpg|gif)$/,  
       use: ['file-loader']  
      }  
    ]  
  },  
  plugins: [  
    new HtmlWebPackPlugin({  
      template: "./src/html/index.html",  
      filename: "./index.html",  
      excludeChunks: [ 'server' ]  
    })  
  ]  
}  

上記のすべてが動作することを確認するには、ブラウザのDev Toolsを使用してCSSを見てください。違いが分かるはずです.Devは画像ファイルへのリンクを持っている必要があります。

buildDevを実行したところ、エラーが発生(なかなか1回で通らないなぁ)

npm run buildDev  
ERROR in Entry module not found: Error: Can't resolve './src/server/server-dev.js' in 'E:\00_Development\src\NodeJS\express-webpack'  
npm ERR! code ELIFECYCLE  
npm ERR! errno 2  
npm ERR! [email protected] buildDev: `(if exist dist rd dist /s /q) && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js`  
npm ERR! Exit status 2  
npm ERR!  
npm ERR! Failed at the [email protected] buildDev script.  
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.  

npm ERR! A complete log of this run can be found in:  
npm ERR!     C:\Users\wakui\AppData\Roaming\npm-cache\_logs\2018-12-07T06_07_06_330Z-debug.log  

./src/server/server-dev.jsがないため前回作ったserver.jsをリネームして作成、ついでに./src/server/server-prod.jsserver.jsをコピーして作成
buildDevを実行して成功

npm run buildDev  
Hash: fa7f25b29cfc92d547a1  
Version: webpack 4.27.1  
Time: 4235ms  
Built at: 2018-12-07 15:17:12  
    Asset      Size  Chunks             Chunk Names  
server.js  5.15 KiB  server  [emitted]  server  
Entrypoint server = server.js  
[./src/server/server-dev.js] 677 bytes {server} [built]  
[express] external "express" 42 bytes {server} [built]  
[path] external "path" 42 bytes {server} [built]  
Hash: 1825c3d14b01b8828f32  
Version: webpack 4.27.1  
Time: 5107ms  
Built at: 2018-12-07 15:17:19  
                               Asset       Size  Chunks             Chunk Names  
                        ./index.html  374 bytes          [emitted]  
40f2415d89a70d2c43d735d7607767c0.jpg   12.7 KiB          [emitted]  
                             main.js   23.6 KiB    main  [emitted]  main  
                         main.js.map   26.6 KiB    main  [emitted]  main  
Entrypoint main = main.js main.js.map  
[./node_modules/css-loader/index.js!./src/css/style.css] ./node_modules/css-loader!./src/css/style.css 573 bytes {main} [built]  
[./src/css/style.css] 1.06 KiB {main} [built]  
[./src/img/bg.jpg] 82 bytes {main} [built]  
[./src/index.js] 299 bytes {main} [built]  
[./src/js/logger.js] 183 bytes {main} [built]  
    + 4 hidden modules  
Child html-webpack-plugin for "index.html":  
     1 asset  
    Entrypoint undefined = ./index.html  
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/html/index.html] 379 bytes {0} [built]  

Devの実行結果は後述

buildProdを実行したらエラーが発生

npm run buildProd  
    ERROR in ./src/css/style.css (./node_modules/css-loader!./src/css/style.css)  
    Module not found: Error: Can't resolve 'url-loader' in 'E:\00_Development\src\NodeJS\express-webp     @ ./src/css/style.css (./node_modules/css-loader!./src/css/style.css) 7:221-245  

url-loader がインストールされていないようなので入れてみる。

npm install -D url-loader  

buildProdを実行したら成功

npm run buildProd  
Version: webpack 4.27.1  
Time: 774ms  
Built at: 2018-12-07 15:34:06  
    Asset      Size  Chunks             Chunk Names  
server.js  1.34 KiB       0  [emitted]  server  
Entrypoint server = server.js  
[0] ./src/server/server-prod.js 677 bytes {0} [built]  
[1] external "path" 42 bytes {0} [built]  
[2] external "express" 42 bytes {0} [built]  
Hash: 03c22de78395825607c0  
Version: webpack 4.27.1  
Time: 1238ms  
Built at: 2018-12-07 15:34:11  
       Asset       Size  Chunks             Chunk Names  
./index.html  365 bytes          [emitted]  
    main.css   17.1 KiB       0  [emitted]  main  
     main.js   1.18 KiB       0  [emitted]  main  
 main.js.map   4.82 KiB       0  [emitted]  main  
Entrypoint main = main.css main.js main.js.map  
[0] ./src/index.js 299 bytes {0} [built]  
[1] ./src/js/logger.js 183 bytes {0} [built]  
[2] ./src/css/style.css 39 bytes {0} [built]  
    + 1 hidden module  
Child html-webpack-plugin for "index.html":  
     1 asset  
    Entrypoint undefined = ./index.html  
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/html/index.html 292 bytes {0} [built]  
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/css/style.css:  
    Entrypoint mini-css-extract-plugin = *  
    [0] ./node_modules/css-loader!./src/css/style.css 573 bytes {0} [built]  
    [3] ./src/img/bg.jpg 16.9 KiB {0} [built]  
        + 2 hidden modules  

DevとProdの実行結果を比較(npm startして http://localhost:8080 をブラウザで表示)
Dev CSSと画像ファイルがそのまま参照できる。

Prod CSSはminifyされ、画層ファイルはbase64エンコードしている。

Step 5: Webpack Dev Middlewareを追加する(Add Webpack Dev Middleware)

あなたが今までの反復開発で気づいたように、ファイルを変更するたびにnpm run buildDevを実行すると、本当に迷惑になります...
webpack-dev-middleware 助けになります。
Webpack Dev Middleware(WDM)は、ソースファイルを監視し、ファイルを保存するたびにWebpackビルドを実行します。
すべての変更はメモリ内で処理されるため、ファイルはディスクに書き込まれません。
ホットモジュールリロード(HMR)はWebpack Dev Middlewareの上に構築されているので、まずこの手順を実行する必要があります。

devの依存関係でインストールしましょう

npm install --save-dev webpack-dev-middleware  

WDMはまだこの記事の執筆時点でWebpack 4に追いついていないので、webpack.dev.config.jsからオブジェクトをエクスポートすることが期待され、argv.modeを使用してモードを設定する関数をエクスポートすることはできません。代わりに、configファイルにハードコードする必要があります。

2018/12/7 に確認したところ webpack-dev-middleware は Webpack4に対応しています。 webpack-dev-middleware

webpack.dev.config.jsを更新しましょう。
webpack.dev.config.js

const path = require('path')  
const webpack = require('webpack')  
const HtmlWebPackPlugin = require('html-webpack-plugin')  
module.exports = {  
  entry: {  
    main: './src/index.js'  
  },  
  output: {  
    path: path.join(__dirname, 'dist'),  
    publicPath: '/',  
    filename: '[name].js'  
  },  
  mode: 'development',  
  target: 'web',  
  devtool: '#source-map',  
  module: {  
    rules: [  
      {  
        test: /\.js$/,  
        exclude: /node_modules/,  
        loader: "babel-loader",  
      },  
      {  
        // Loads the javacript into html template provided.  
        // Entry point is set below in HtmlWebPackPlugin in Plugins   
        test: /\.html$/,  
        use: [  
          {  
            loader: "html-loader",  
            //options: { minimize: true }  
          }  
        ]  
      },  
      {   
        test: /\.css$/,  
        use: [ 'style-loader', 'css-loader' ]  
      },  
      {  
       test: /\.(png|svg|jpg|gif)$/,  
       use: ['file-loader']  
      }  
    ]  
  },  
  plugins: [  
    new HtmlWebPackPlugin({  
      template: "./src/html/index.html",  
      filename: "./index.html",  
      excludeChunks: [ 'server' ]  
    }),  
    new webpack.NoEmitOnErrorsPlugin()  
  ]  
}  

./src/server/server-dev.js をWDMコードで更新する必要があります。
server-dev.js

import path from 'path'  
import express from 'express'  
import webpack from 'webpack'  
import webpackDevMiddleware from 'webpack-dev-middleware'  
import config from '../../webpack.dev.config.js'  
const app = express(),  
            DIST_DIR = __dirname,  
            HTML_FILE = path.join(DIST_DIR, 'index.html'),  
            compiler = webpack(config)  
app.use(webpackDevMiddleware(compiler, {  
  publicPath: config.output.publicPath  
}))  
app.get('*', (req, res, next) => {  
  compiler.outputFileSystem.readFile(HTML_FILE, (err, result) => {  
  if (err) {  
    return next(err)  
  }  
  res.set('content-type', 'text/html')  
  res.send(result)  
  res.end()  
  })  
})  
const PORT = process.env.PORT || 8080  
app.listen(PORT, () => {  
    console.log(`App listening to ${PORT}....`)  
    console.log('Press Ctrl+C to quit.')  
})  

そして最後に./src/index.js

import logMessage from './js/logger'  
import './css/style.css'  
// Log message to console  
logMessage('A very warm welcome to Expack!')  
// Needed for Hot Module Replacement  
if(typeof(module.hot) !== 'undefined') {  
  module.hot.accept() // eslint-disable-line no-undef    
}  

npm run buildDevnpm start を実行すると、うまくいくはずです。ファイル(logger.jsやindex.htmlなど)を変更し、更新するとその変更が表示されます。

npm run buildDevnpm start を実行する。(今回は1回で成功!)
実行結果

./src/html/index.html を修正して保存する。

ブラウザをリロードすると反映されている。

Step 7: Add ESLint Code Linting

npm install --save-dev eslint babel-eslint eslint-loader  

.eslintrc.js という名前のルートに次のファイルを作成します。
.eslintrc.js

module.exports = {  
  "plugins": [ "react" ],  
  "extends": [  
    "eslint:recommended",  
    "plugin:react/recommended"  
  ],  
  "parser": "babel-eslint"  
};  

次に、webpack.dev.config.jsを更新します。
webpack.dev.config.js

const path = require('path')  
const webpack = require('webpack')  
const HtmlWebPackPlugin = require('html-webpack-plugin')  
module.exports = {  
  entry: {  
    main: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './src/index.js']  
  },  
  output: {  
    path: path.join(__dirname, 'dist'),  
    publicPath: '/',  
    filename: '[name].js'  
  },  
  mode: 'development',  
  target: 'web',  
  devtool: '#source-map',  
  module: {  
    rules: [  
      {  
        enforce: "pre",  
        test: /\.js$/,  
        exclude: /node_modules/,  
        loader: "eslint-loader",  
        options: {  
          emitWarning: true,  
          failOnError: false,  
          failOnWarning: false  
        }  
      },  
      {  
        test: /\.js$/,  
        exclude: /node_modules/,  
        loader: "babel-loader",  
      },  
      {  
        // Loads the javacript into html template provided.  
        // Entry point is set below in HtmlWebPackPlugin in Plugins   
        test: /\.html$/,  
        use: [  
          {  
            loader: "html-loader",  
            //options: { minimize: true }  
          }  
        ]  
      },  
      {   
        test: /\.css$/,  
        use: [ 'style-loader', 'css-loader' ]  
      },  
      {  
       test: /\.(png|svg|jpg|gif)$/,  
       use: ['file-loader']  
      }  
    ]  
  },  
  plugins: [  
    new HtmlWebPackPlugin({  
      template: "./src/html/index.html",  
      filename: "./index.html",  
      excludeChunks: [ 'server' ]  
    }),  
    new webpack.HotModuleReplacementPlugin(),  
    new webpack.NoEmitOnErrorsPlugin()  
  ]  
}  

./src/index.js のHMRコードに次のESlint行disablerを追加します。(すでに入っているので不要)

module.hot.accept() // eslint-disable-line no-undef  

buildDevを実行したところ別のエラーが発生

npm run buildDev  
ERROR in ./src/index.js  
Module build failed (from ./node_modules/eslint-loader/index.js):  
Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'  
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)  
...以下略  

.eslintrc.js の reactを使っているところをコメントアウト
.eslintrc.js

module.exports = {  
  //"plugins": ["react"],  
  "extends": [  
    "eslint:recommended",  
    //"plugin:react/recommended"  
  ],  
  "parser": "babel-eslint"  
};  

buildDevを実行したところ原文通りのエラーが発生

そして、npmを実行してbuildDevを実行すると、2つのエラーが発生するはずです。

  • Unexpected console statement no-console
  • ’console’ is not defined no-undef
  • コンソール・ステートメントは、Prod で出荷されるべきではありません。そのため、リンターはこれを指摘しています。それを沈黙させるには、上記のコメントを追加して、logger.js の問題のある行でlintingを無効にします。

    logger.js

    const logMessage = msg => console.log(msg) // eslint-disable-line no-undef,no-console  
    export default logMessage  

    index.js

    import logMessage from './js/logger'  
    import './css/style.css'  
    // Log message to console  
    logMessage('A very warm welcome to Expack!')  
    // Needed for Hot Module Replacement  
    if (typeof (module.hot) !== 'undefined') { // eslint-disable-line no-undef    
    module.hot.accept() // eslint-disable-line no-undef    
    }  

必要なその他のESLintプラグインは次のとおりです。

  • eslint-plugin-import
  • eslint-plugin-node
  • eslint-plugin-promise
  • eslint-plugin-react
  • eslint-plugin-standard

Step 8: Jest Unitのテストとカバレッジを追加する(Add Jest Unit Testing and Coverage)

estを使用してコードをユニットテストします。 Jestは、Node、Express、Reactで使用されている場合、MochaやKarmaよりも問題が少ないので、私の意見では、確かに行く方法です!

npm install --save-dev jest  

mocksという名前のルートにディレクトリを作成し、その中にfileMock.jsとstyleMock.jsの2つのファイルを作成します。これを使用して、大きなファイルやスタイルを模倣するのです。これらのオリジナルは単体テストには必要ないからです。

src  
dist  
__mocks__  
    fileMock.js  
    styleMock.js  

fileMock.jsに次のコードを挿入します。
fileMock.js

module.exports = 'test-file-stub';  

styleMock.jsに次のコードを挿入します。
styleMock.js

module.exports = {};  

今すぐpackage.jsonを更新する
Unix系OS
package.json

"scripts": {  
  "test": "jest",  
  "coverage": "jest --coverage",  
  "buildDev": "rm -rf dist && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js",  
  "buildProd": "rm -rf dist && webpack --mode production --config webpack.server.config.js && webpack --mode production --config webpack.prod.config.js",  
  "start": "node ./dist/server.js"  
},  
"jest": {  
  "moduleNameMapper": {  
    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",  
    "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"  
  }  
},  

Windowsの場合

"scripts": {  
  "test": "jest",  
  "coverage": "jest --coverage",  
  "buildDev": "(if exist dist rd dist /s /q) && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js",  
  "buildProd": "(if exist dist rd dist /s /q) && webpack --mode production --config webpack.server.config.js && webpack --mode production --config webpack.prod.config.js",  
  "start": "node ./dist/server.js"  
},  
"jest": {  
  "moduleNameMapper": {  
    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",  
    "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"  
  }  
},  

簡単にテスト可能なファイルを作成しましょう。新しいファイル ./src/js/adder.js とテストファイルを新しいディレクトリ、./src/js/test/adder.test.js に作成します。

adder.jsのコードは次のとおりです。

const adder = (x, y) => x + y  
export default adder  

adder.test.jsのコードは次のとおりです。

import adder from '../adder'  
describe('Adder', () => {  
  test('adds two numbers', () => {  
    expect(adder(5, 3)).toEqual(8)  
  })  
})  

これで、npm testを実行できます。テストに合格する必要があります。また、npm実行カバレッジを実行してカバレッジレポートを取得することもできます。
そしてあなたはそれを持っています、皆さん!ホットモジュールリロード、リンテイング、およびJestによるユニットテストを備えたExpress-Webpackアプリケーション。

あなたが記事を楽しんだ場合、またはそれが役に立つと分かった場合は、「Gap」ボタンを押すか、「Github」の「Star」を押すか、以下の回答を残してください。私はそれらのことが大好きです。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@wakusanの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!