[英]How do I fix the Typescript error Unable to compile TypeScript:
[英]How do I get this Typescript Webpack project to compile without error?
我正在尝试在我正在工作的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()
]
};
该错误基本上是TypeScript抱怨它正在将JavaScript作为CommonJS模块( require
, module
)获取,但它期望import
和export =
。 在磁盘上的来源是正确的,所以东西似乎是将其转化前往打字稿之前,该代码。
我相信问题是TypeScript实际上被运行了两次。 如果您查看加载程序,则每个扩展名正则表达式的末尾都有问号( ?
)。 那是使每个扩展名的最后一个字母为可选,这是不正确的。 在这种情况下, .ts
扩展名将与/\\.ts?$/
和/\\.tsx?$/
匹配,因此webpack对同一文件执行两次TypeScript。 第一遍工作正常,但第二遍失败,因为它已被转换。
您应该从几乎所有的加载程序测试中删除问号。 问号是个好主意的地方是tsx
和jsx
。 因此,为/\\.tsx?$/
配置的单个加载程序将正确匹配.ts
和.tsx
。 jsx
。
@Richard,也许@Peter Varga的回答可以帮助您:
代替var mongoose = require('mongoose')尝试以下方法
从“猫鼬”进口猫鼬; //要么
进口猫鼬= require('mongoose');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.