This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Farmin Farzin
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
also added a new script to my package.json:
"build" : "webpack"
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
}),
],
});
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
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"]
}
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
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: {},
}),
],
});
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"
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Farmin Farzin
Farmin Farzin | Sciencx (2022-10-11T20:17:51+00:00) Setting up Typescript and Webpack together. Retrieved from https://www.scien.cx/2022/10/11/setting-up-typescript-and-webpack-together/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.