@lzwme/strip-loader

A simple webpack loader to strip custom debug statements from your code. This can be useful if you want to use debug statements while developing your app but don't want this info exposed in your production code.

Getting Started

Installation

To begin, you'll need to install the loader with npm, yarn or pnpm:

# use npm
npm install -D @lzwme/strip-loader
# or use yarn
yarn add -D @lzwme/strip-loader
# or use pnpm
pnpm add -D @lzwme/strip-loader

Usage in webpack

In your webpack configuration object, you'll need to add @lzwme/strip-loader to your list of modules.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // test: /\.(t|j)sx?$/,
        test: /\.(css|scss|less|jsx?|tsx?)$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('@lzwme/strip-loader'),
            options: {
              disabled: process.env.NODE_ENV === 'development',
              // debug: false,
              // blocks: [{
              //   start: 'devblock:start',
              //   end: 'devblock:end',
              //   prefix: '/*',
              //   end: '*/',
              // }],
            },
          },
        ],
      },
    ];
  }
}

Use in your source files:

export class Abc {
  constructor() {
    console.log('test for production');

    /** devblock:start */
    this.test();
    /** devblock:end */
  }
  /* devblock:start */
  // this code block will be removed in production mode.
  private test() {
    console.log('test for development');
  }
  /* devblock:end */
}

Usage in rollup

import { rollupStripPlugin } from '@lzwme/strip-loader';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    strip({
      disabled: process.env.NODE_ENV !== 'production' ?,
      // includes: '**/*.(js|jsx|ts|tsx)',
      // exlude: 'tests/**/*',
      // debug: false,
      // blocks: [{
      //   start: 'devblock:start',
      //   end: 'devblock:end',
      //   prefix: '/*',
      //   end: '*/',
      // }],
    })
  ]
};

Options

| Name | Type | Default | Description | | :--------------------------: | :------------------: | :---------------------: | :----------------------------------------------- | | blocks | {object} | `` | You can customize the blocks config. | | blocks[i].start | {string} | devblock:end | You can customize the start comment tag. | | blocks[i].end | {string} | devblock:end | You can customize the end comment tag. | | blocks[i].preifx | {string} | /* | | | blocks[i].suffix | {string} | */ | | | isReplaceWithPlaceHolder | {boolean} | true | Replace the matched code block with placeholder. | | debug | {boolean} | false | Print some debugging information. | | disabled | {boolean} | false | Disable the loader. |

Example for Options.blocks

Config for files of js,css and html:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css|scss|less|jsx?|tsx?|html?$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('@lzwme/strip-loader'),
            options: {
              disabled: process.env.NODE_ENV === 'development',
              // debug: false,
              blocks: [
                {
                  start: 'devblock:start',
                  end: 'devblock:end',
                }, {
                  start: 'devblock:start',
                  end: 'devblock:end',
                  prefix: '<--',
                  end: '-->',
                }
              ],
            },
          },
        ],
      },
    ];
  }
}

Use in html file:

<div>for prod</div>

<!-- devblock:start --->
<div>for dev</div>
<!-- devblock:end --->

Development

git clone https://github.com/lzwme/strip-loader
pnpm install
pnpm test

License

@lzwme/strip-loader is released under the MIT license.

该插件由志文工作室开发和维护。