Question

我用ES6语法开发了一个JS SDK。 SDK的文件大小约为8Kb。用babel编译后，SDK的大小约为20Kb。我发现babel使用助手“ babel-runtime / helpers / typeof ”转换了运算符typeof，这增加了我SDK的大小。如果我在SDK中未使用typeof，则SDK的文件大小约为7Kb。

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

我的 .babelrc 的详细信息：

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

package.json

的devDependencies

{
    "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"
 }

我的 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'
            }
        ]
    }
}

我需要防止babel转换'typeof'，以便减小SDK的文件大小。

有什么方法可以防止babel变换运算符typeof吗？

Answer 1

我已经找到解决问题的方法：

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

exclude的详细信息，请参见：https://babeljs.io/docs/en/babel-preset-env#exclude

Answer 2

我有同样的问题。我不知道typeof有什么问题，因为这似乎已成为ES的第一天功能。 Symbol对象存在一些问题，但是我没有发现任何突出该问题的文章。

无论如何，可能的解决方案是删除typeof：

!(arg instanceOf Function)

另外，一个可靠的解决方法是老式的类型检查器：

Object.prototype.toString.call(alert) === '[object Function]'

我更喜欢的方法是检查call是否存在：

args.call && console.log('OK')

typeof的好处在于，它可以很好地与未声明的变量一起使用。

对于您而言，这无关紧要，因为arg被声明为函数参数。否则，您应该使用try/catch来避免可能的ReferenceError。

如何在JS中防止babel变换运算符'typeof'

2 个答案: