1. babel-plugin-transform-require-ignore
ignore the required file by extension type
babel-plugin-transform-require-ignore
Package: babel-plugin-transform-require-ignore
Created by: morlay
Last modified: Mon, 13 Jun 2022 04:05:21 GMT
Version: 0.1.1
License: MIT
Downloads: 55,784
Repository: https://github.com/morlay/babel-plugin-transform-require-ignore

Install

npm install babel-plugin-transform-require-ignore
yarn add babel-plugin-transform-require-ignore

babel-plugin-transform-require-ignore

Build Status
NPM
Dependencies
License

Since https://nodejs.org/api/globals.html#globals_require_extensions deprecated.

We have to find another way to ignore the extensions for webpack usage and make it work in node environment.

Configure it in .babelrc for node, we could ignore the requirement when run test in node or build server render app.

Then we run babel with BABEL_ENV=node will active this plugin;

 {
  "env": {
    "node": {
      "plugins": [
        [
          "babel-plugin-transform-require-ignore",
          {
            "extensions": [".less", ".sass"]
          }
        ]
      ]
    }
  }
}

or use with babel-register in require-hooks

require('babel-register')({
  'plugins': [
    [
      'babel-plugin-transform-require-ignore',
      {
        extensions: ['.scss']
      }
    ]
  ]
});

Or with cli like other plugin used.

Notice:

Only ignore import './some.less'; or require('./some.less');

If assign to some variable, means that may use css-module,
please use https://github.com/css-modules/css-modules-require-hook instead.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin