Question

我试图通过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 dev服务器时，我的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时，它声明：

ERROR in ./ui/index.ts
Module build failed: Cannot resolve module 'child_process' in /..../typings/node
    Required in /..../typings/node/node.d.ts

我从loader repo中复制了node.d.ts文件，但仍然没有运气。

有没有人能够顺利完成这种组合？或者我应该使用不同的网络打包器？我真的很想让它与webpack一起工作。

Answer 1

您所缺少的只是一个键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']
    }
};

Answer 2

您可以考虑使用其他webpack TypeScript loader。我知道有一些节点的问题。还有一对starter kits可能有所帮助。

免责声明：我是ts-loader的维护者。

Answer 3

尝试创建tsconfig.json文件。

例如，当您使用awesome-typescript-loader时，这应该有效：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": true
  },
  "exclude": [
    "node_modules"
  ],
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

Webpack和TypeScript：无法解析模块＆＃39; child_process＆＃39;在node.d.ts中

3 个答案: