Node.js 我如何让这个Typescript网页包项目编译无误?
在我的工作webpack node.js项目中,我试图将两个.js文件转换为.ts文件,并对其进行编译(actions.ts和flux.ts)。跑步时Node.js 我如何让这个Typescript网页包项目编译无误?,node.js,npm,typescript,webpack,definitelytyped,Node.js,Npm,Typescript,Webpack,Definitelytyped,在我的工作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
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'.
@Richard,也许可以帮你:
尝试以下操作,而不是var mongoose=require('mongoose')
从“猫鼬”进口猫鼬//或
导入猫鼬=需要(“猫鼬”)
错误基本上是TypeScript抱怨它将JavaScript作为一个公共JS模块(
require
,module
)获取,但它需要import
和export=
。磁盘上的源代码是正确的,所以在转换到TypeScript之前,似乎有什么东西在转换代码
我认为问题在于TypeScript实际上运行了两次。如果查看加载程序,在每个扩展正则表达式的末尾都有问号(?
)。这使得每个扩展的最后一个字母都是可选的,这是不正确的。在这种情况下,.ts
扩展名将与/\.ts?$/
和/\.tsx?$/
匹配,因此webpack对同一文件执行两次TypeScript。第一个过程工作正常,但第二个过程失败,因为它已经被转换
您应该删除几乎所有加载程序测试中的问号。问号是一个好主意的地方是
tsx
和jsx
。因此,为/\.tsx?$/
配置的单个加载程序将正确匹配.ts
和.tsx
。jsx也一样
您是否安装了alt
npm模块?是的,在将两个文件更改为.ts之前,一切正常。我有所有的npm模块,现在我在typings文件夹中也有了所有模块的定义(虽然我不知道webpack是否能看到它们),谢谢,我已经尝试了这两种方法。即使你可以看到“require”这个词甚至不在我的代码中,我也会遇到同样的错误。非常感谢!我已经为此挣扎了一周。但它还不完全正确-现在“require”被接受,但它找不到模块“alt”。如您所见,我的resolve.modulesDirectories配置中既有“node_modules”又有“typings”。我还必须做什么?有人告诉我将///添加到.ts文件的顶部。成功了。我以为webpack会自动处理它,但看起来我必须将这些引用分别添加到每个文件中。你不需要将其添加到每个文件中。整个程序只需加载一次。(因此,您可以在输入文件中添加一个//
,或者更好地使用tsconfig的文件
数组)感谢James Brantly,如果您想将此答案添加到我打开的问题中,您可以得到以下几点:
'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()
]
};