1 minute read

AWS Lambda doesn’t support Typescript out of the box. I have to convert typescript files into javascript and upload it to the lambda. I thought it must be a trivial job to do it, yet I couldn’t find any starter package like create-react-app.

After a bit of googling-around, it seemed Webpack is the tool to bundle multiple javascript files into one. So I started learning Webpack by watching videos on YouTube. Before, I just used create-react-app and it did everything I need for me.

Following the tutorial series, I’ve initialised the typescript project

tsc --init

I updated tsconfig.json, though. By default, it’s es5 and commonjs

"target": "es6",
"module": "ES2015",

Then I initialised the project with npm to create package.json

npm init

I can install NPM packages now. I prefer yarn

yarn add typescript webpack webpack-cli ts-loader --dev

You may have typescript installed globally, yet you need to install it locally as well for the webpack to work properly.

I’ve created /src and /dist in the root directory. Now my project folder looks like this.

Let’s add webpack.config to transpile and bundle the typescripts.

const path = require('path')

module.exports = {
  entry: {
    'create-user': './src/create-user/index.ts',
    'create-job': './src/create-job/index.ts'
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
		library: {
      type: 'commonjs2',
    },
    filename: '[name]/index.js',
    path: path.resolve(__dirname, 'dist')
  }
}

I’m going to create multiple functions in this project. So it has multiple entry points. Each function has its own directory. I have two directories, create-user and create-job.

module’s rules specifies ts-loader as transpiler. It will convert typescript files in src directory into javascript. test acts like a filter.

output tells the webpack where to store the bundled scripts. path accepts absolute path, so I used Nodejs’ path library. [name]refers to the name of the entry. Output directory will have sub-directories of create-user and create-job

Finally, add webpack script in the package.json file.

"scripts": {
    "build": "webpack"
  },

When you do yarn build it will bundle up all typescript files into a single javascript file, index.js in each directory.

Comments