Webpack 不捆绑 TypeScript
Webpack doesn't bundle TypeScript
我 运行 陷入捆绑我的 TS 项目的问题。好像 ts-loader 不识别 TypeScript 语法。
我收到的错误:
ERROR in ./src/common/components/chat/chatComponent.tsx
Module parse failed: The keyword 'interface' is reserved (10:0)
You may need an appropriate loader to handle this file type.
| import { ChatItemComponent, ChatMessageItem, isMessage, Props as Item } from "./chatItem";
|
| interface Props {
| className?: string;
| fullHistoryFetched?: boolean;
和
ERROR in ./src/common/closer.tsx
Module parse failed: Unexpected token (10:13)
You may need an appropriate loader to handle this file type.
| import * as chatItem from "./components/chat/chatItem";
| import * as chatItemStyles from "./components/chat/chatItem.css";
| import Timer = NodeJS.Timer;
| import { ImageComponent } from "./components/image/image";
| import { InitialsAvatar } from "./components/initialsAvatar";
我的webpack.config.js如下:
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: {
index: './src/agent/index.tsx',
preloader: './src/agent/preloader.js',
},
target: 'web',
output: {
path: path.resolve(__dirname, 'dist/agent'),
filename: '[name].js',
publicPath: '/dist/agent/'
},
module: {
rules: [
{
test: /\.(ts|tsx)?$/,
include: path.resolve(__dirname, 'src/agent'),
use: [
{
loader: 'ts-loader'
}
]
},
...
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
}
};
这是我的 tsconfig.json
{
"buildOnSave": false,
"compileOnSave": false,
"compilerOptions": {
"alwaysStrict": true,
"experimentalDecorators": true,
"jsx": "react",
"module": "commonjs",
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"pretty": true,
"removeComments": true,
"skipLibCheck": true,
"sourceMap": true,
"strictNullChecks": true,
"target": "es5",
"lib": [
"es2015",
"dom"
],
"types": [
"jasmine",
"node",
"react"
]
},
"exclude": [
"node_modules",
"dist"
]
}
我使用的版本:
"typescript": "2.5.3", "ts-loader": "4.0.1", "webpack": "^4.1.1.
我错过了什么吗?在我的 tsconfig.json 文件中,我将要生成的源定位到 ES5
中,因此据我所知,我不需要 babel。
include
就是问题所在。您将 ts-loader
限制为仅 src/agent
。您得到的错误是针对 src/common
.
中的文件
include
也可以是一个数组,只要传每个有打字稿文件的文件夹即可。
我 运行 陷入捆绑我的 TS 项目的问题。好像 ts-loader 不识别 TypeScript 语法。
我收到的错误:
ERROR in ./src/common/components/chat/chatComponent.tsx
Module parse failed: The keyword 'interface' is reserved (10:0)
You may need an appropriate loader to handle this file type.
| import { ChatItemComponent, ChatMessageItem, isMessage, Props as Item } from "./chatItem";
|
| interface Props {
| className?: string;
| fullHistoryFetched?: boolean;
和
ERROR in ./src/common/closer.tsx
Module parse failed: Unexpected token (10:13)
You may need an appropriate loader to handle this file type.
| import * as chatItem from "./components/chat/chatItem";
| import * as chatItemStyles from "./components/chat/chatItem.css";
| import Timer = NodeJS.Timer;
| import { ImageComponent } from "./components/image/image";
| import { InitialsAvatar } from "./components/initialsAvatar";
我的webpack.config.js如下:
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: {
index: './src/agent/index.tsx',
preloader: './src/agent/preloader.js',
},
target: 'web',
output: {
path: path.resolve(__dirname, 'dist/agent'),
filename: '[name].js',
publicPath: '/dist/agent/'
},
module: {
rules: [
{
test: /\.(ts|tsx)?$/,
include: path.resolve(__dirname, 'src/agent'),
use: [
{
loader: 'ts-loader'
}
]
},
...
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
}
};
这是我的 tsconfig.json
{
"buildOnSave": false,
"compileOnSave": false,
"compilerOptions": {
"alwaysStrict": true,
"experimentalDecorators": true,
"jsx": "react",
"module": "commonjs",
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"pretty": true,
"removeComments": true,
"skipLibCheck": true,
"sourceMap": true,
"strictNullChecks": true,
"target": "es5",
"lib": [
"es2015",
"dom"
],
"types": [
"jasmine",
"node",
"react"
]
},
"exclude": [
"node_modules",
"dist"
]
}
我使用的版本:
"typescript": "2.5.3", "ts-loader": "4.0.1", "webpack": "^4.1.1.
我错过了什么吗?在我的 tsconfig.json 文件中,我将要生成的源定位到 ES5
中,因此据我所知,我不需要 babel。
include
就是问题所在。您将 ts-loader
限制为仅 src/agent
。您得到的错误是针对 src/common
.
中的文件
include
也可以是一个数组,只要传每个有打字稿文件的文件夹即可。