a demo of node with webpack4 and typescript

github: git@github.com:spcBackToLife/node-webpack4-ts-demo.git

what is this.

this is a simple project for you to undenstand how to build a simpe-node-demo, includes:

• webpack4 + typescripts
• node environment
• nodemon for hot relaod node files

you can try this with the doc below. and the project demo is this
repository.

init the project

mkdir node-webpack4-ts-demo
cd node-webpack4-ts-demo && npm init

then you will get a package.json file.
next, you can create src/main.ts.

add typescript

add dependences

# typescript need
yarn add typescript -D  
yarn add @types/node -D # to recognize the `require`

add ts config: create a tsconfig.json in root path

{
    "compilerOptions": {
       "strictNullChecks": true,
       "module": "commonjs",
       "esModuleInterop": true,
       "importHelpers": true,
       "allowSyntheticDefaultImports": true,
       "target": "es5",
       "lib": [
        "es2015"
       ]
    },
    "include": [
        "src" // write ts in src, you can define your own dir
    ]
}

use webpack to build typescript

add dependences

yarn add webpack webpack-cli - D
yarn add babel-loader awesome-typescript-loader source-map-loader -D

create webpack.config.js(this demo has simply distribute the dev confg,just as a demo)

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    mode: 'development',
    // change to .tsx if necessary
    entry: './src/main.ts',
    target: 'node',
    output: {
      filename: './dist/main.js',
      path: path.join(__dirname, '')
    },
    resolve: {
      // changed from extensions: [".js", ".jsx"]
      extensions: [".ts", ".tsx", ".js", ".jsx"]
    },
    module: {
      rules: [
        { 
          test: /\.ts(x?)$/, use: [
            
            {
              loader: 'babel-loader'
            },
            {
              loader: 'awesome-typescript-loader' # handle ts
            }
          ]
        },
        // addition - add source-map support
        { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
      ]
    },
    node: {
        __dirname: false, // handle node dirname filename error after pack
        __filename: false
    },
    // addition - add source-map support
    devtool: "source-map"
  }

use babel to handle some grammer problems such as import in node

add dependences

yarn add @babel/core @babel/plugin-syntax-dynamic-import -D
yarn add @babel/plugin-transform-runtime @babel/preset-env -D

create .babelrc file and write

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import", # handle import problems
    "@babel/plugin-transform-runtime"
  ]
}

add node run command

add dependences

yarn add nodemon -D
yarn add ts-node -D # ts-node can directly run ts file

run code
first, we need to create a nodemon.json for nodemon.

{
    "ignore": ["**/*.test.ts", "**/*.spec.ts", ".git", "node_modules"],
    "watch": ["src"],
    "exec": "yarn dev",
    "ext": "ts"
}

then, add scripts in package.json

# `webpack` the js with entry main.ts and user `nodemon` run the packed js
#  use `nodemon` instead of `node` for hot reloading.
{
    ...
    "start:dev": "nodemon",
    "dev": "ts-node ./src/main.ts"
    ...
}

last, run yarn start:dev, and it will run nodemon with nodemon.json, it will watch the src file changes,
after that it will run yarn dev to run the main.ts, then you can try to change the file main.ts, it will relaod it self.

if you want to pack the file and run the packed file, just add two cmds like this:

{
    ...
    "build-dev": "webpack --config ./config/webpack/webpack.config.dev.js",
    "start-dev": "yarn build-dev && node ./dist/main.js",
    ...
}

then you can yarn start-dev

github: git@github.com:spcBackToLife/node-webpack4-ts-demo.git