我试图通过awesome- typescript -loader使webpack,typescript和react.js一起工作,但是我经常遇到错误。
我在版本0.3.0-rc.2和webpack 1.8.9中使用了很棒的打字稿加载器
这是我的webpack.config.js:
module.exports = { entry: './ui/index.ts', output: { path: __dirname + '/build-ui', filename: 'app.js', publicPath: 'http://localhost:8090/assets' }, module: { loaders: [ { test: /\.jsx$/, loader: 'jsx-loader?insertPragma=React.DOM&harmony' }, { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" }, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, { test: /\.ts$/, loader: 'awesome-typescript-loader' } ] }, resolve: { extensions: ['', '.js', '.jsx', '.ts'] } };
当我运行webpack开发服务器时,我的index.ts看起来像这样:
alert('hello');
它指出以下错误:
ERROR in ./ui/index.ts /Users/..../typings/node/node.d.ts:29:12 Subsequent variable declarations must have the same type. Variable 'require' must be of type 'WebpackRequire', but here has type '{ (id: string): any; resolve(id: string): string; cache: any; extensions: any; main: any; }'.
当我放入参考路径时也一样。
当我尝试通过import React = require('react');它导入React.js 时指出:
import React = require('react');
ERROR in ./ui/index.ts Module build failed: Cannot resolve module 'child_process' in /..../typings/node Required in /..../typings/node/node.d.ts
我从加载器存储库中复制了node.d.ts文件,仍然没有运气。
有人能使这种组合顺利进行吗?还是应该使用其他Web打包程序?我真的很想让它与webpack一起使用。
您所缺少的只是一把钥匙target: 'node'。
target: 'node'
这样可以确保您要定位的环境是Node.js,而不是浏览器,因此将忽略本机依赖性。
最终配置:
module.exports = { entry: './ui/index.ts', target: 'node', output: { path: __dirname + '/build-ui', filename: 'app.js', publicPath: 'http://localhost:8090/assets' }, module: { loaders: [ { test: /\.jsx$/, loader: 'jsx-loader?insertPragma=React.DOM&harmony' }, { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" }, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, { test: /\.ts$/, loader: 'awesome-typescript-loader' } ] }, resolve: { extensions: ['', '.js', '.jsx', '.ts'] } };