Webpack并不是所有的源地图都显示typescript
Webpack not all sourcemaps show typescript
我有一个这样的项目:
Root
| index.html
| package.json
| tree.txt
| tsconfig.json
| webpack.config.js
|
+---.vscode
| settings.json
| tasks.json
|
+---app
| | main.js
| | main.js.map
| | main.ts
| | test.js
| | test.js.map
| | test.ts
| |
| +---components
| | app.component.js
| | app.component.js.map
| | app.component.ts
| |
| '---modules
| app.module.js
| app.module.js.map
| app.module.ts
|
'---node_modules
|
*SNIP*
我的问题是,只有我的主要。它的源代码在chrome开发工具中显示为实际的typescript, app.module, app.component和test显示为编译后的javascript。
我发现的关于webpack typescript的其他问题要么是babel加载器特定的,要么是放置断点的问题,要么是根本没有生成源地图的问题。
我tsconfig:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"watch": true,
"compileOnSave": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/browser",
"typings/browser.d.ts"
],
"atom": {
"rewriteTsconfig": false
},
"typeRoots": [
"./node_modules/@types"
],
"types": [
"core-js"
]
}
我webpack.config.js :
const config = {
entry: {
app: "./app/main.ts"
},
output: {
filename: "./bundle.js",
path: "./"
},
devtool: "source-map",
module: {
loaders: [
{
test: /'.ts$/,
loaders: ["awesome-typescript-loader", "angular2-template-loader"]
}
]
},
resolve: {
extentions: ["", ".ts", ".js"]
}
}
module.exports = config;
Chrome开发工具输出main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './modules/app.module';
import { test } from "./test";
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
alert(test.msg)
// WEBPACK FOOTER //
// ./~/angular2-template-loader!./app/main.ts
Chrome开发工具输出test.js:
"use strict";
var test = (function () {
function test() {
}
test.msg = "test";
return test;
}());
exports.test = test;
//# sourceMappingURL=test.js.map
//////////////////
// WEBPACK FOOTER
// ./app/test.js
// module id = 25
// module chunks = 0
所有独立的.map文件源都指向脚本的ts版本。
webpack-dev-server命令输出:
webpack-dev-server -d
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from C:'Users'Joseph Goodley'Desktop'stockmonitor'frontend
Hash: b3331cfe915060534a0f
Version: webpack 1.13.3
Time: 7618ms
Asset Size Chunks Chunk Names
./bundle.js 1.54 MB 0 [emitted] app
./bundle.js.map 1.75 MB 0 [emitted] app
chunk {0} ./bundle.js, ./bundle.js.map (app) 1.49 MB [rendered]
[0] ./app/main.ts 326 bytes {0} [built]
[1] ./~/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js 6.89 kB {0} [built]
[2] ./~/@angular/compiler/bundles/compiler.umd.js 825 kB {0} [built]
[3] ./~/@angular/core/bundles/core.umd.js 386 kB {0} [built]
[4] ./~/rxjs/Subject.js 5.33 kB {0} [built]
[5] ./~/rxjs/Observable.js 6.04 kB {0} [built]
[6] ./~/rxjs/util/root.js 471 bytes {0} [built]
[7] ./~/rxjs/util/toSubscriber.js 707 bytes {0} [built]
[8] ./~/rxjs/Subscriber.js 8.87 kB {0} [built]
[9] ./~/rxjs/util/isFunction.js 148 bytes {0} [built]
[10] ./~/rxjs/Subscription.js 5.99 kB {0} [built]
[11] ./~/rxjs/util/isArray.js 146 bytes {0} [built]
[12] ./~/rxjs/util/isObject.js 151 bytes {0} [built]
[13] ./~/rxjs/util/tryCatch.js 422 bytes {0} [built]
[14] ./~/rxjs/util/errorObject.js 177 bytes {0} [built]
[15] ./~/rxjs/util/UnsubscriptionError.js 1.07 kB {0} [built]
[16] ./~/rxjs/Observer.js 193 bytes {0} [built]
[17] ./~/rxjs/symbol/rxSubscriber.js 270 bytes {0} [built]
[18] ./~/rxjs/symbol/observable.js 631 bytes {0} [built]
[19] ./~/rxjs/util/ObjectUnsubscribedError.js 955 bytes {0} [built]
[20] ./~/rxjs/SubjectSubscription.js 1.4 kB {0} [built]
[21] ./~/@angular/platform-browser/bundles/platform-browser.umd.js 120 kB {0} [built]
[22] ./~/@angular/common/bundles/common.umd.js 121 kB {0} [built]
[23] ./app/modules/app.module.js 1.42 kB {0} [built]
[24] ./app/components/app.component.js 1.22 kB {0} [built]
[25] ./app/test.js 175 bytes {0} [built]
webpack: bundle is now VALID.
我注意到它在[23-24]上构建js文件,但是我不知道为什么,另外只是运行webpack——debug生成一个bundle.js.map文件,它的源也指向js文件。
这个问题已经困扰我很长一段时间了,所以如果是一些简单的问题,我道歉。
谢谢你的帮助!
更新:
问题可能是我在打包之前编译了ts ?我尝试运行webpack没有编译的文件,但现在它找不到我的ts文件:
./app/main.ts
Module not found: Error: Cannot resolve 'file' or 'directory' ./modules/app.module in C:'--'app
resolve file
C:'--'app'modules'app.module doesn't exist
C:'--'app'modules'app.module.webpack.js doesn't exist
C:'--'app'modules'app.module.web.js doesn't exist
C:'--'app'modules'app.module.js doesn't exist
C:'--'app'modules'app.module.json doesn't exist
resolve directory
C:'--'app'modules'app.module doesn't exist (directory default file)
C:'--'app'modules'app.module'package.json doesn't exist (directory description file)
[C:'--'app'modules'app.module]
[C:'--'app'modules'app.module.webpack.js]
[C:'--'app'modules'app.module.web.js]
[C:'--'app'modules'app.module.js]
[C:'--'app'modules'app.module.json]
@ ./app/main.ts 3:19-50
为什么它不能解析我的。ts文件?
找到问题。
在我的package.config
"extensions"应该是"extensions"不幸的是,我没有错误指示语法问题
正如您所说,错误在您的webpack.config.js
内。从Webpack 2开始,当您有一个无效的配置对象时,它会给出一个错误消息,因此升级您的Webpack版本将帮助您在将来避免这些问题。
如果你不想升级webpack,你可以使用这个包来自动验证你的配置:https://github.com/js-dxtools/webpack-validator.
- 张贴到地图显示的限制
- 谷歌地图显示灰色方框
- 无法让谷歌地图显示在我的网站上
- Google Maps Javascript API v3 地图显示在桌面浏览器上,但不会显示在移动浏览器上
- 双击谷歌地图显示提示框不起作用
- 谷歌地图显示钦奈(印度)使用javascript
- 使用 IMG 地图显示更大的图像
- 当缩放级别为 1 时,谷歌地图显示 kml(内部是图像 URL)不正确
- 无法让我的 openlayers 地图显示在网页上
- 谷歌地图显示没有jQuery
- 谷歌地图显示问题
- 谷歌/必应地图显示所有城市
- Esri 地图显示信息窗口,无需单击地图
- 必应地图显示地图的左上角的北美
- 谷歌地图显示KML数据
- 谷歌地图显示新请求后的旧方向
- 谷歌地图显示什么,直到我最小化屏幕
- 谷歌地图显示多个地图而不是一个
- 为什么谷歌地图显示灰色,而没有初始化缩放&当使用jQuery按钮更改缩放时,居中,地图上的居中效果非常好
- 谷歌地图显示标题的信息框