I want to use babel-plugin-ramda in my project to shake the dependencies (tree shaking) that is not being used in my project.
When I ran "npm run start", Webpack successfully bundled my TypeScript into my dist folder, but the plugin was ignored by Webpack - no error or warning.
I tried messing around my config, and the plugin kind of worked (Ramda library size reduced after bundling), but when I added typescript syntax, Babel was not able to recognize the syntax and threw me errors... The config I tried:
const path = require('path');
const nodeConfig = {
name: "Node",
mode: process.env.NODE_ENV || 'development',
target: 'node',
entry: './src/node.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: {
loader: 'ts-loader'
}
},
{
test: /\.ts$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: ['ramda'],
presets: ['@babel/preset-env']
}
}
}
],
},
devtool: false,
resolve: {
extensions: ['.ts', '.js']
}
};
module.exports = nodeConfig
And, this is what my current config, babelrc and tsconfig look like:
webpack.config.cjs
const path = require('path');
const nodeConfig = {
name: "Node",
mode: process.env.NODE_ENV || 'development',
target: 'node',
entry: './src/node.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
],
},
devtool: false,
resolve: {
extensions: ['.ts', '.js']
}
};
module.exports = nodeConfig
tsconfig.json
{
"compilerOptions": {
"target": "ES2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
.babelrc
{
"plugins": [
["ramda", {
"useES": true,
}]
],
"presets": ["@babel/preset-env", "@babel/typescript"],
}
My import looks like this:
import * as R from "ramda";