DEV Community

Farmin Farzin
Farmin Farzin

Posted on • Originally published at farmin.dev

Setting up Typescript and Webpack together

Recently I became more interested and more engaged with Typescript and I'm moving some of my JS code to TS.

In one of my projects which was just a plugin, I had a huge JS file including the whole plugin code and I started to work on that.
So I started to split the code into multiple files and then I figured out that other people would appreciate it if I just move the code to TS so I started to add TS to the project.

First, I went through the code and made some functions based on the logic and as always I tried to make sure I apply some concepts of functional programming to make it easier for testing too.
Then I moved the functions into multiple files and export/import them. But I needed something to bundle them again back cause I needed to keep that format for my plugin.

Webpack

I added it to my project:

yarn add webpack webpack-cli
Enter fullscreen mode Exit fullscreen mode

also added a new script to my package.json:

"build" : "webpack"
Enter fullscreen mode Exit fullscreen mode

then I needed to configure it, so made a webpack.config.js file:

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

module.exports = (env, argv) => ({
  mode: argv.mode === 'production' ? 'production' : 'development',

  entry: {
    code: './src/start.ts', // The entry point for plugin code. bundle file name is 'code'
  },

  resolve: { extensions: ['.jsx', '.js'] },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
  },

  plugins: [
    new webpack.DefinePlugin({
      global: {}, // Fix missing symbol error when running in developer VM
    }),
  ],
});

Enter fullscreen mode Exit fullscreen mode

As I was testing it, I figured out some of the configurations to make sure my plugin is still working...
Awesome, after running yarn build I was getting my code.js file including all the codes from the functions that I exported from the other files.

Typescript

Alright, I wanted to have TS to make sure I'm type-checking. I just started to rename my .js files to .ts and then I installed the required dependencies.

yarn add typescript
Enter fullscreen mode Exit fullscreen mode

and I added tsconfig.json file to my project

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "es5",
    "outDir": "./dist/",
    "sourceMap": true,
    "declaration": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "allowJs": true,
    "moduleResolution": "node",
    "strict": true,
    "typeRoots": [
      "./node_modules/@types",
    ],
    "skipLibCheck": true,
  },
  "include": ["src/**/*.ts"]
}

Enter fullscreen mode Exit fullscreen mode

now I was getting some weird errors, of course, cause I needed to hook my Typescript config with the webpack so I get a js file output after transpile-ing from TS and bundling the JS files

Webpack and Typescript (ts-loader)

Installed new dependency needed

yarn add ts-loader
Enter fullscreen mode Exit fullscreen mode

made the changes to my webpack.config.js

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

module.exports = (env, argv) => ({
  mode: argv.mode === 'production' ? 'production' : 'development',

  entry: {
    code: './src/start.ts',
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },

  resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },

  plugins: [
    new webpack.DefinePlugin({
      global: {},
    }),
  ],
});

Enter fullscreen mode Exit fullscreen mode

well, now when I ran yarn build, I had all my .ts files bundled into one JS file and had my type definitions beside it.
More, I added another script to watch the changes as I'm developing

"build:watch": "npm run build -- --watch"
Enter fullscreen mode Exit fullscreen mode

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (1)

Collapse
 
eshimischi profile image
eshimischi

Use Vite instead.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more