Question

我正在努力缩小babel预设的ES2015转换输出，但我没有成功这样做。转换后的代码有效，缩小版本不起作用。

这是一个空的ES2015 JS课程：

class TestApp {

}

export default TestApp;

使用babel cli对课程进行透明化。

$babel TestApp.js --out-file ../dist/TestApp.min.js

我的.babelrc文件。

{
        sourceMap: false,
        presets: ["es2015"],
        moduleRoot: '',
        moduleIds: true,
        plugins: [["transform-es2015-modules-umd", {
                "globals": {
                        "jquery": "jQuery"
                }
        }], "external-helpers"]
}

TestApp.min.js的输出

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define("/TestApp", ["exports"], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports);
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports);
    global.TestApp = mod.exports;
  }
})(this, function (exports) {
  "use strict";

  Object.defineProperty(exports, "__esModule", {
    value: true
  });

  var TestApp = function TestApp() {
    babelHelpers.classCallCheck(this, TestApp);
  };

  exports.default = TestApp;
});

检查Chrome Inspector中是否存在TestApp会返回此输出：

TestApp
{default: ƒ, __esModule: true}
default
:
ƒ TestApp()
__esModule
:
true
__proto__
:
Object

现在，进入缩小过程。我正在使用webpack来转换和缩小TestApp.js

var path = require('path');
var webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


module.exports = {
    entry: {
        TestApp: __dirname + '/src/TestApp.js'
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].min.js'
    },
    resolve: {
        modules: [
            path.resolve(__dirname, '../../common/assets'),
        ]
    },
    module: {        
        rules: [            
            {
              test: /\.css$/,
              use: [ 'css-loader' ]
            },
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                loader: 'babel-loader'
            }
        ]
    },
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    },
    plugins: [
        new UglifyJsPlugin({
            uglifyOptions:{
              beautify: false,
              mangle: false,
              keep_classnames: true,
              keep_fnames: true
            }
        }
        ),  
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
        })
    ]
}

在浏览器中加载缩小版TestApp

TestApp
VM51511:1 Uncaught ReferenceError: TestApp is not defined
    at <anonymous>:1:1

缩小babel编译错误ES2015代码

0 个答案: