如何让这个 Typescript Webpack 项目编译无误？

Question

我正在尝试将我工作的 webpack node.js 项目中的两个 .js 文件转换为 .ts 文件并编译它（actions.ts 和 flux.ts）。当运行

webpack --progress --colors

我收到这个错误：

ERROR in ./src/app/tools/flux.ts
(2,11): error TS2304: Cannot find name 'require'.

ERROR in ./src/app/tools/flux.ts
(4,1): error TS2304: Cannot find name 'module'.

ERROR in ./src/app/actions/actions.ts
(2,12): error TS2304: Cannot find name 'require'.

ERROR in ./src/app/actions/actions.ts
(11,1): error TS2304: Cannot find name 'module'.

我该如何解决这些问题？

你可以在这张截图的右边看到我的文件夹结构和我正在尝试编译的代码：

如果有帮助，这是我的 webpack 配置：

'use strict';

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var rootPath = __dirname; //site
var srcPath = path.join(rootPath, 'src'); //site/src

module.exports =
{
    bail: true,
    cache: true,
    context: rootPath,
    debug: true,
    devtool: 'inline-source-map', //'eval-cheap-module-source-map','inline-source-map'
    target: 'web',
    devServer:
    {
        contentBase: './dist',
        historyApiFallback: true
    },
    entry:
    {
        app: path.join(srcPath, 'app/actions/actions.ts'),  //main.jsx
        lib: ['react', 'react-router']
    },
    output:
    {
        path: path.join(rootPath, 'dist'),
        publicPath: '',
        filename: '[name].js',
        library: ['[name]', '[name]'],
        pathInfo: true
    },
    resolve:
    {
        root: srcPath,
        extensions: ['', '.js', '.jsx', '.ts', '.tsx'],
        modulesDirectories: ['node_modules', 'src', 'typings']
    },
    module:
    {
        loaders:
        [
            {test: /\.js?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.jsx?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.ts?$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.tsx?$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.scss?$/, loaders: ['style', 'css', 'sass']},
            {test: /\.png?$/, loader: 'file-loader'},
            {test: /\.jpg?$/, loader: 'file-loader'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
        ]
    },
    plugins:
    [
        new CopyWebpackPlugin
        ([
            { from: 'src/images', to: 'images' }
        ]),
        new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'),
        new HtmlWebpackPlugin
        ({
            inject: true,
            template: 'src/index.html'
        }),
        new webpack.NoErrorsPlugin()
    ]
};

Answer 1

@Richard，也许可以帮到你：

Instead of var mongoose = require('mongoose') try the following

import mongoose from 'mongoose'; //or

import mongoose = require('mongoose');

Answer 2

错误基本上是 TypeScript 抱怨它正在将 JavaScript 作为 CommonJS 模块（require、module），但它期望 import 和 export = .磁盘上的源代码是正确的，因此 某些东西 似乎在将代码转换为 TypeScript 之前对其进行了转换。

我认为问题在于 TypeScript 实际上是运行两次。如果您查看加载器，您会发现每个扩展正则表达式末尾都有问号 (?)。这使每个扩展名的最后一个字母成为可选的，这是不正确的。在这种情况下，.ts 扩展名将与 /\.ts?$/ 和 /\.tsx?$/ 匹配，因此 webpack 会为同一个文件执行两次 TypeScript。第一遍工作正常，但第二遍失败，因为它已经被转换了。

您应该从几乎所有加载程序测试中删除问号。问号是个好主意的地方是 tsx 和 jsx。因此，为 /\.tsx?$/ 配置的单个加载程序将正确匹配 .ts 和 .tsx。 jsx.

也是如此

如何让这个 Typescript Webpack 项目编译无误？

How do I get this Typescript Webpack project to compile without error?

node.js

npm

typescript

definitelytyped

webpack