如何将socket.io-client与webpack捆绑在一起？

Question

我是webpack的新手,并且在使用webpack捆绑socket.io-client时遇到了问题.有人可以告诉我我做错了什么吗？

我正在使用Angular 2 RC.1

的package.json

...."dependencies": {
"@angular/http": "2.0.0-rc.1",
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/platform-server": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"core-js": "^2.3.0",
"rxjs": "5.0.0-beta.7",
"zone.js": "~0.6.12",
"socket.io": "^1.4.6"
}....

typings.json

  ...."ambientDependencies": {
"socket.io-client": "registry:dt/socket.io-client#1.4.4+20160317120654",....

socket.ts

import {Component} from '@angular/core';
require ('socket.io-client/socket.io');

@Component({
    selector: 'socket',
    templateUrl: 'app/components/socket/socket.html',
    styleUrls: ['app/components/socket/socket.css'],
})
export class SocketTest {
socket = null;

constructor() {
    this.socket = io('http://localhost:3001');
  ....

错误:

    ./~/socket.io-client/socket.io.js
Critical dependencies:
1:475-482 This seems to be a pre-built javascript file. Though this is     possible, it's not recommended. Try to require the original source to get better     results.
 @ ./~/socket.io-client/socket.io.js 1:475-482
browser_adapter.js:86 EXCEPTION: Error: Uncaught (in promise): EXCEPTION:     Error in :0:0
ORIGINAL EXCEPTION: ReferenceError: io is not defined
ORIGINAL STACKTRACE:
ReferenceError: io is not defined....

Answer 1

在你的webpack.config.js中,添加socket.js作为一个外部库,这样它就不会被你的其他javascript打包,

当然,您需要将这些设置与角度设置合并.

external:{
    ...
    'socket.io-client':'io'
}

resolve: {
    alias: {
        ...
        'socket.io-client': path.join( __dirname, 'node_modules', 'socket.io-client', 'socket.io.js' )
    }
},
module: {
    ...
    noParse: [ /socket.io-client/ ]
}

然后在index.html中包含

<script src="socket.io.js"></script>

并要求它:

import {Component} from '@angular/core';
require ('io');

@Component({
    selector: 'socket',
    templateUrl: 'app/components/socket/socket.html',
    styleUrls: ['app/components/socket/socket.css'],
})

PS我自己没有尝试过这些设置,我只是想让你走上正轨.