2

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";

  • I figured out the problem... the plugin did work. The problem was another library that was generating long lines of code. Sorry for the trouble... – Owen Truong Oct 09 '22 at 23:35

0 Answers0