2017-05-29 123 views
1

我想让rxjs在打字稿/ webpack设置中工作,但在遵循installation guide并启动webpack dev服务器后,它说找不到模块。我环顾四周,但似乎没有任何东西可以指向我的问题解决方案。使用打字稿/ webpack时无法找到rxjs模块构建

只是为了澄清我已经运行了以下命令npm install rxjs-es @types/es6-shim --save

要设置打字稿/ webpack包,我参考他们的installation guide

tsconfig

{ 
    "compilerOptions": { 
    "outDir": "./dist/", 
    "sourceMap": true, 
    "noImplicitAny": true, 
    "target": "es6", 
    "module": "es6", 
    "jsx": "react", 
    "allowJs": true 
    } 
} 

的WebPack配置

module.exports = { 
    entry: './index.ts', 
    output: { 
     filename: 'bundle.js', 
     path: __dirname 
    }, 
    module: { 
     rules: [ 
      { 
       enforce: 'pre', 
       test: /\.js$/, 
       loader: "source-map-loader" 
      }, 
      { 
       enforce: 'pre', 
       test: /\.tsx?$/, 
       use: "source-map-loader" 
      } 
     ], 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.tsx?$/, 
       exclude: /node_modules/, 
       use: [ 'babel-loader', 'ts-loader' ] 
      } 
     ] 
    }, 
    resolve: { 
     extensions: [".tsx", ".ts", ".js"] 
    }, 
    devtool: 'inline-source-map', 
}; 

索引

import * as d3 from 'd3'; 
import Rx from 'rxjs/Rx'; 


d3.select("body").append("span") 
    .text("Hello, world!"); 

Rx.Observable.of(`Hello World`) 
    .subscribe(result => console.log(result)); 

错误消息:

enter image description here

我同时使用rxjsrxjs-es包尝试,并重新命名进口rxjs-es/Rx

不知道如果我在这里失去了一些东西,因为它是在与此相比,安装d3.js非常简单。

如果您需要更多信息请说,任何帮助非常感谢,欢呼!

回答

1

什么工作对我来说:

我开始与你所描述的设置,但改变了以下内容:

  • NPM安装rxjs,不rxjs-ES
  • (编辑)删除@types/es6-shim
  • 新增"moduleResolution": "node"至tsconfig.json
  • index.ts中的导入声明更改为:

    import * as Rx from 'rxjs'; 
    

...和它的工作,无论是从内部VSCode和的WebPack。

+0

真棒 - 谢谢!此外,安装'@ types/es6-shim'是不必要的,在使用您的解决方案后会抛出编译器错误。以防万一其他人使用这个 – since095

+0

哎呀,是的,我忘了:我也删除@ types/es6-shim - 加入回答! –

相关问题