js声明一个类，用babel和webpack打包处理后实例化调用失败

Question

目标

目标是编写一个多模块的项目，最后暴露一个主类作为公共方法，可以使html文件中引入js文件，直接实例化该类就可以使用其中的方法。

实现过程

首先用babel将ES6+编译成ES5代码，再通过webpack将多个编译后的ES5代码文件打包成一个js文件，以这个文件作为被项目引入的项。

问题

webpack打包后，找不到对外暴露的类

具体信息

目录结构

package.json内容

{
  "name": "videoTranscodingDemo",
  "version": "1.0.0",
  "description": "h264 to fmp4\r demo",
  "main": "index.js",
  "scripts": {
    "cleanLib": "rimraf ./lib",
    "cleanDist": "rimraf ./dist",
    "babel": "npm run cleanLib && babel src --out-dir lib",
    "webpack": "npm run cleanDist && webpack --config webpack.config.js",
    "build": "npm run babel && browserify -t browserify-versionify -t [babelify] -s Wfs lib/index.js --debug | exorcist dist/videoDriver.js.map -b . > dist/videoDriver.js",
    "build:webpack": "npm run babel && npm run webpack"
  },
  "repository": {
    "type": "git",
    "url": "git@code-sh2.rnd.huawei.com:w30003572/videoTranscodingDemo.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0",
    "browserify-versionify": "^1.0.6",
    "exorcist": "^1.0.1",
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0"
  }
}

webpack配置

const path = require('path');

module.exports = {
    entry: './lib/index.js',
    mode: 'none',
    output: {
        filename: 'videoDriver.js',
        path: path.resolve(__dirname, 'dist')
    }
}

打包前videoDriver内容

class VideoDriver {
    constructor() {
        this.isSupport = VideoDriver.isSupported();
    }

    static isSupported() {
        return (window.MediaSource &&
                typeof window.MediaSource.isTypeSupported === 'function' &&
                window.MediaSource.isTypeSupported('video/mp4; codecs="avc1.42c01f,mp4a.40.2"'));
    }

    test() {
        console.log('testing...');
    }
}

export default VideoDriver;

打包后的videoDriver内容

/******/ (() => { // webpackBootstrap
/******/     "use strict";
/******/     var __webpack_modules__ = ([
/* 0 */
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(1).default;

/***/ }),
/* 1 */
/***/ ((__unused_webpack_module, exports) => {

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var VideoDriver = function () {
    function VideoDriver() {
        _classCallCheck(this, VideoDriver);

        this.isSupport = VideoDriver.isSupported();
    }

    _createClass(VideoDriver, [{
        key: 'test',
        value: function test() {
            console.log('testing...');
        }
    }], [{
        key: 'isSupported',
        value: function isSupported() {
            return window.MediaSource && typeof window.MediaSource.isTypeSupported === 'function' && window.MediaSource.isTypeSupported('video/mp4; codecs="avc1.42c01f,mp4a.40.2"');
        }
    }]);

    return VideoDriver;
}();

exports.default = VideoDriver;

/***/ })
/******/     ]);
/************************************************************************/
/******/     // The module cache
/******/     var __webpack_module_cache__ = {};
/******/     
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/         // Check if module is in cache
/******/         if(__webpack_module_cache__[moduleId]) {
/******/             return __webpack_module_cache__[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = __webpack_module_cache__[moduleId] = {
/******/             // no module.id needed
/******/             // no module.loaded needed
/******/             exports: {}
/******/         };
/******/     
/******/         // Execute the module function
/******/         __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/     
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }
/******/     
/************************************************************************/
/******/     // startup
/******/     // Load entry module
/******/     __webpack_require__(0);
/******/     // This entry module used 'module' so it can't be inlined
/******/ })()
;

index.html内容

<!DOCTYPE html>
<html>
    <head>
        <title>
            h.264 To fmp4 DEMO
        </title>
    </head>
    <body>
        <script id="vd" type="text/javascript" src="/dist/videoDriver.js"></script>
        <script> 
            var vd = new VideoDriver();
            vd.test(); 
        </script>
    </body>
</html>

浏览器报错内容

补充

lib文件夹是通过babel将ES6+的js代码转成ES5后的产物，然后再通过webpack把lib文件夹的内容打包至dist下

Answer 1

webpack ouput 改成输出为 library 而不是打包成 app