我如何得到这个Typescript Webpack项目编译没有错误?

我试图将我的工作webpack node.js项目中的两个.js文件转换为.ts文件并编译它(actions.ts和flux.ts)。 运行时

webpack --progress --colors 

我得到这个错误:

错误在./src/app/tools/flux.ts
 (2,11):错误TS2304:找不到名称'require'。

错误在./src/app/tools/flux.ts
 (4,1):错误TS2304:找不到名称“模块”。

错误在./src/app/actions/actions.ts
 (2,12):错误TS2304:找不到名称'require'。

错误在./src/app/actions/actions.ts
 (11,1):错误TS2304:找不到名称“模块”。

我该如何解决这些问题?

在这个屏幕截图中,您可以看到我的文件夹结构以及我正在尝试编译的代码:

文件夹结构

这是我的webpackconfiguration,如果有帮助:

 '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() ] }; 

这个错误基本上是TypeScript抱怨说,它将JavaScript作为CommonJS模块( requiremodule ),但是期望importexport = 。 磁盘上的源代码是正确的,所以在获得TypeScript之前似乎正在转换该代码。

我认为问题在于TypeScript实际上正在运行两次。 如果你看看你的装载机,你在每个扩展正则expression式的末尾都有问号( ? )。 这是每个扩展的最后一个字母可选,这是不正确的。 在这种情况下,一个.ts扩展名将被/\.ts?$//\.tsx?$/匹配,所以webpack对同一个文件执行两次TypeScript。 第一次传球正常,但第二次传球失败,因为它已经被转换。

您应该从几乎所有的加载程序testing中删除问号。 问号是一个好主意的地方是tsxjsx 。 所以configuration为/\.tsx?$/的单个装载器将正确地匹配.ts.tsx 。 同样适用于jsx

@理查德,也许@Peter瓦尔加答案可以帮助你:

而不是var mongoose = require('mongoose')尝试以下操作

从“mongoose”importmongoose; //要么

import mongoose = require('mongoose');