javascript - 模块解析失败:意外的令牌
问题描述
嘿得到下面的错误我运行 webpack 命令: $> webpack --mode "development"
堆栈跟踪:
Version: webpack 4.17.2
Time: 1357ms
Built at: 09/10/2018 8:13:26 PM
Asset Size Chunks Chunk Names
bundle.js 1.37 MiB main [emitted] main
Entrypoint main = bundle.js
[0] fs (ignored) 15 bytes {main} [built]
[./node_modules/css-loader/index.js!./wwwroot/Source/Styles/app.css] ./node_modules/css-loader!./wwwroot/Source/Styles/app.css 165 bytes {main} [built]
[./node_modules/css-loader/index.js!./wwwroot/Source/Styles/site.css] ./node_modules/css-loader!./wwwroot/Source/Styles/site.css 207 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {main} [built]
[./wwwroot/Source/Script/app.ts] 221 bytes {main} [built]
[./wwwroot/Source/Script/site.ts] 274 bytes {main} [built] [failed] [1 error]
[./wwwroot/Source/Styles/app.css] 1.06 KiB {main} [built]
[./wwwroot/Source/Styles/site.css] 1.07 KiB {main} [built]
+ 30 hidden modules
ERROR in ./wwwroot/Source/Script/site.ts 25:8
Module parse failed: Unexpected token (25:8)
You may need an appropriate loader to handle this file type.
|
| class Animal {
> name: string;
| constructor(theName: string) { this.name = theName; }
| move(distanceInMeters: number = 0) {
@ ./wwwroot/Source/Script/app.ts 4:0-16
转译时,它似乎无法识别我的任何类中的属性。
** ts 代码 **
class Animal {
name: string;
constructor(theName: string) { this.name = theName; }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved
${distanceInMeters}m.`);
}
}
tsconfig
{
"compilerOptions": {
"outDir": "./app/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"allowJs": true,
"sourceMap": true
}
}
包.json
{
"name": "ExposureAPI",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@types/jquery": "^3.3.6",
"@types/underscore": "^1.8.9",
"babel-loader": "^8.0.2",
"bootstrap": "^4.1.3",
"css-loader": "^1.0.0",
"gulp-babel": "^8.0.0",
"jquery": "^3.3.1",
"popper.js": "^1.14.4",
"style-loader": "^0.22.1",
"ts-loader": "^4.5.0",
"typescript": "^3.0.1",
"underscore": "^1.9.1",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"@types/simplemde": "^1.11.7",
"simplemde": "^1.11.2"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './wwwroot/Source/Script/app.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
devtool: 'inline-source-map'
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
path: path.resolve(__dirname, 'wwwroot/App'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
exclude: ['node_modules'],
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}]
}
};
谢谢
解决方案
显然,这是因为您module
在 webpack 配置对象中有两个属性。
给定 JS 对象每个键只能保存一个值 - 一个值会丢失。在这种特殊情况下,后者覆盖了前者,因此 webpack 最终配置为根本没有 typescript loader 配置。
推荐阅读
- c# - C# excel 互操作进程在崩溃后仍然存在
- linux - 我想通过使用 cmake 使用正确的程序检测 clang 来使用 clang/clang++ 进行编译
- c - 如何将数组放置在变量提供的特定内存位置?
- ios - 如何使用一个 var 或 let 从视图控制器到另一个视图控制器
- javascript - jQuery在加载时保持选定的内容
- python-multiprocessing - 使用大型 HDF5 文件进行多处理
- amazon-web-services - AWS SES,使用未经验证的“发件人”发送邮件
- go - 用于使用 SDRS 创建 vApp 虚拟机的 vSphere API
- swift - Swift 从 UICollectionViewCell 导航到 UIViewController
- c# - 在绑定表单上显示特定行