Question

我正在关注此tutorial以了解网络包。它已经过时了，因为引用的工具在我的案例中进行了升级。我的版本如下。

ts-loader ^ 1.3.3
tsd ^ 0.6.5
typescript ^ 2.1.5
webpack ^ 1.14.0

成功创建bundle.js文件后，我似乎无法访问/引用我的TypeScript到JavaScript类。我的tsconfig.json如下所示。

{
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true,
    "declaration": true
  },
  "include": [
    "src/**/*"
  ]
}

我的wepack.config.js如下所示。

var webpack = require('webpack');
module.exports = {  
  entry: './src/app.ts',
  output: {
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
}

要转换TypeScript代码，我只需输入tsc即可。要将所有代码捆绑到bundle.js，我只需输入webpack即可。（tsc和webpack全局安装）。

在我的src目录中，我只有2个简单的类。 car.ts如下所示。

export class Car {
  public sayHi(): void {
    console.log('car says hi');
  }
}

app.ts如下所示。

import { Car } from './car'; //alternatively, import Car = require('./car');

let car = new Car();
car.sayHi();

然后我将此bundle.js加载到HTML页面的浏览器中，如下所示。

<html>
  <head>
    <title>Test Webpack</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

我可以在（Chrome）JavaScript控制台中看到日志消息＆＃34;汽车说嗨＆＃34;。但是如何创建一个新的Car实例？以下在JavaScript控制台上的尝试都无效。

var c1 = new Car(); //Uncaught reference error
var c2 = new car.Car(); //Uncaught reference error

在bundle.js内，我确实看到正在生成此代码/模块（代码段）。

/* 0 */
/***/ function(module, exports, __webpack_require__) {

    "use strict";
    var car_1 = __webpack_require__(1);
    var car = new car_1.Car();
    car.sayHi();


/***/ },
/* 1 */
/***/ function(module, exports) {

    "use strict";
    var Car = (function () {
        function Car() {
        }
        Car.prototype.sayHi = function () {
            console.log('car says hi');
        };
        return Car;
    }());
    exports.Car = Car;


/***/ }

我的最终目标是将src目录中的所有TypeScript文件（使用（TypeScript）映射）转换为单个bundle.js作为模块，以便我可以使用/引用代码（作为JavaScript中的JavaScript）浏览器）如下。

var car = new mylib.Car();
var plane = new mylib.Plane();
car.sayHi();
plane.sayHi();

关于我做错的任何想法？

Answer 1

您需要设置output.library设置：

output: {
    ...
    library: 'MyLibrary'
}

然后您可以在控制台中以这种方式使用它：

var x = new MyLibrary.Car();

Webpack documentation（output.libray）

如何从webpack创建的包中引用或访问我的类？

2 个答案: