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

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

javascript typescript webpack

Javascript 如何从webpack创建的包中引用或访问我的类？,javascript,typescript,webpack,Javascript,Typescript,Webpack,我跟随这个学习网页。它已经过时了，因为在我的例子中引用的工具已经升级了。我的版本如下 <html> <head> <title>Test Webpack</title> </head> <body> <script src="bundle.js"></script> </body> </html> var car = new mylib.Car

我跟随这个学习网页。它已经过时了，因为在我的例子中引用的工具已经升级了。我的版本如下

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

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

ts加载器^1.3.3
tsd^0.6.5
类型脚本^2.1.5
网页^1.14.0

成功创建

bundle.js

文件后，我似乎在访问/引用我的类型脚本到JavaScript类时遇到了问题。我的

tsconfig.json

如下所示

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

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

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

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

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

我的wepack.config.js如下所示

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

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

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

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

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

要传输TypeScript代码，我只需输入

tsc

。要将所有代码捆绑到

bundle.js

，我只需键入

webpack

。（tsc和webpack在全球范围内安装）

在我的src目录中，我只有2个简单的类。

car.ts

如下所示

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

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

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

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

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

app.ts

如下所示

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

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

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

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>

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

在

bundle.js

中，我确实看到了生成的代码/模块（代码片段）

我的最终目标是将

src

目录中的所有TypeScript文件与（TypeScript）映射一起传输到单个

bundle.js

作为一个模块，这样我就可以使用/引用代码（如浏览器中的JavaScript），如下所示

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

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

你知道我做错了什么吗？

你应该做的是让webPack也替你处理这个问题。使用

webpack所做的是制作模块（这是您放置的最后一个文件，所有内容都在一个具有上下文的函数中，并且没有您在全局空间中提供的名称）。任何全局名称都绑定到该范围（如果您不愿意，也可以更改），因此您无法从控制台访问它们。让webpack使用typescript加载程序，您只需输入文件即可引用汽车。

您需要设置

输出。库设置：
output: {
    ...
    library: 'MyLibrary'
}

然后，您可以在控制台中以这种方式使用它：
var x = new MyLibrary.Car();

（输出库）
如果你看我的webpack.config.js，我不是指定了ts加载器
？因为你引用了官方文档，我用awesome typescript加载器
替换了ts加载器
，我仍然得到同样的效果。没有区别。我无法引用该类。但您仍在尝试从控制台引用吗？此外，我可能会误解，但我的印象是，你是手动编译ts，然后从我的头顶捆绑如果你想像在文本中那样使用控制台，也许你可以将Car添加到全局空间作为“window.Car=Car”否，我只是简单地键入webpack
来生成bundle.js
（忽略tsc
部分）。我不是试图从控制台（例如nodejs）引用类，而是从浏览器引用类。不，我不想那样污染全球名称空间。就像我说的，mylib.Car
是首选。你是如何解决你的问题的？你能和我分享一下吗？