Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent babel transform operator 'typeof' in JS

Tags:

babeljs

I develope a JS SDK with ES6 grammar. The file size of the SDK is about 8Kb. After compile it with babel, size of SDK is about 20Kb. I find that babel transforms operator typeof with a helper "babel-runtime/helpers/typeof", which increase my SDK's size. If I don't use typeof in my SDK, the file size of my SDK is about 7Kb.

_validateCallback(fnName, arg) {
    if (typeof arg !== 'function') {
        throw new TypeError(`[${fnName}]'s arguments[0] must be a function, but get a ${typeof arg}`);
    }
}

The detail of my .babelrc:

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers": [
                        "last 2 versions",
                        "ie >= 9"
                    ]
                }
            }
        ],
        "stage-2"
    ],
    "plugins": [
        "transform-runtime"
    ]
}

The devDependencies of package.json

{
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^4.37.0",
    "webpack-cli": "^3.3.6"
 }

The detail of my webpack.config.js

{
    mode: 'production',
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'botapp-sdk.' + PACKAGE.version + '.js',
        library: 'BotApp', 
        libraryTarget: 'var', 
    },
    plugins: [

        new webpack.HashedModuleIdsPlugin(),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.BannerPlugin(PACKAGE.name + ' - ' + PACKAGE.version),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    }
}

I need to prevent babel to transform 'typeof', so that I can reduce file size of my SDK.

Is there any way to prevent babel transform operator typeof ?

like image 690
Deng Xuening Avatar asked Mar 04 '23 16:03

Deng Xuening


1 Answers

I have been find a way to solve the question:

@@ -8,7 +8,10 @@
                         "last 2 versions",
                         "ie >= 9"
                     ]
-                }
+                },
+                "exclude": [
+                    "transform-es2015-typeof-symbol"
+                ]
             }
         ],
         "stage-2"

The detail of exclude see: https://babeljs.io/docs/en/babel-preset-env#exclude

like image 82
Deng Xuening Avatar answered Apr 24 '23 01:04

Deng Xuening