Typescript 网页包+;反应+;打字稿
是否可以将webpack与React和Typescript一起使用,并且能够将它们捆绑到web捆绑包中,但仍然能够调试原始的Typescript和React代码?在webpack中,我使用ts loader和ts jsx loader加上devtool:“源代码映射”,但当我尝试进行浏览器调试时,我看不到原始的ts代码,而是看到由webpack更改的代码 我当前的基本webpack.config.js文件:Typescript 网页包+;反应+;打字稿,typescript,reactjs,webpack,Typescript,Reactjs,Webpack,是否可以将webpack与React和Typescript一起使用,并且能够将它们捆绑到web捆绑包中,但仍然能够调试原始的Typescript和React代码?在webpack中,我使用ts loader和ts jsx loader加上devtool:“源代码映射”,但当我尝试进行浏览器调试时,我看不到原始的ts代码,而是看到由webpack更改的代码 我当前的基本webpack.config.js文件: var webpack = require('webpack'); module.exp
var webpack = require('webpack');
module.exports = {
entry: ['./app/main.ts'],
output: {
path: './build',
filename: 'bundle.js'
},
debug: true,
devtool: 'source-map',
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin()
],
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loader: 'ts-loader!ts-jsx-loader'
}
]
}
};
tsconfig.json:
{
"compileOnSave": false,
"version": "1.5.0-alpha",
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noLib": false,
"sourceMap": true,
"noImplicitAny": true,
"removeComments": true
},
"files": [
"./AppComponent.ts",
"./libs/jsx.d.ts",
"./libs/react.d.ts",
"./libs/webpack-runtime.d.ts",
"./main.ts"
]
}
例如,我的oryginal.ts文件如下所示:
import React = require('react');
class AppComponent extends React.Component<any, any> {
render () {
return React.jsx(`
<h1>He world!</h1>
`);
}
};
export = AppComponent;
很可能您没有在文件中指定
sourceMap
,因此TypeScript编译器没有输出sourceMap。您不需要使用ts jsx加载程序
在tsconfig.json文件中,您只需要以下内容:
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var React = __webpack_require__(2);
var AppComponent = (function (_super) {
__extends(AppComponent, _super);
function AppComponent() {
_super.apply(this, arguments);
}
AppComponent.prototype.render = function () {
return (React.createElement("h1", null, "He world!"));
};
return AppComponent;
})(React.Component);
;
module.exports = AppComponent;
/*****************
** WEBPACK FOOTER
** ./app/AppComponent.ts
** module id = 158
** module chunks = 0
**/
{
"compilerOptions": {
"jsx": "react",
"sourceMap": true,
// ... other options
}
}
当然,您仍然需要webpack配置文件中的devtool选项我已经将sourceMap添加到tsconfig.json中,但仍然不起作用,所以我只是使用您的配置尝试了一下。我注意到的唯一一点是,假设您使用的是Chrome,则在加载页面时需要保持devtools打开,否则不会加载sourcemap。还要注意,原始Javascript和类型脚本都显示在源代码下,而不仅仅是类型脚本。最后,为了确保一切正常,您应该检查bundle.js以确保它有一个sourceMappingURL,并且bundle.js.map文件看起来正常(您应该在其中看到一些TypeScript)。感谢您的帮助,但不幸的是,它仍然无法工作。我已经发布了一些显示原始代码和调试器代码的示例。在您的输出中,是否有一个名为bundle.js.map的文件?(应该坐在bundle.js旁边)@JamesBrantly我遇到了与原始SO所有者类似的情况,我确实看到了bundle.js.map文件。但是,我仍然无法在Chrome中看到源地图。还有什么别的想法吗?