[英]Typescript -> Babel sourcemaps using webpack
Copy paste from ts-loader issues as it might be more appropriate here: 从ts-loader问题复制粘贴,因为它可能更合适:
How to pass the typescript sourcemaps to babel so the end sourcemap point to the original file and not the compiled typescript one? 如何将打字稿源图传递给babel,以便结束源图指向原始文件而不是编译的打字稿?
Here's an example of my dev settings: 这是我的开发设置示例:
tsconfig.json
: tsconfig.json
:
{
"compilerOptions": {
"target": "es6",
"jsx": "react",
"noImplicitAny": false,
"sourceMap": true
},
"exclude": ["node_modules", "gulpfile.js", "webpack.config.js", "server.js"]
}
webpack.dev.js
: webpack.dev.js
:
var path = require("path");
var webpack = require("webpack");
module.exports = {
devtool: "eval",
entry: [
"webpack-hot-middleware/client",
"./src/app/index",
],
output: {
path: path.join(__dirname, "build"),
filename: "app.js",
publicPath: "/static/"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
'window.fetch': 'exports?self.fetch!whatwg-fetch'
})
],
resolve: {
extensions: ['', '.ts', '.tsx', '.js']
},
module: {
noParse: [
/\/sinon.js/
],
preLoaders: [{
test: /\.ts(x?)$/,
loader: "tslint",
exclude: /node_modules/
}],
loaders: [
{
test: /\.tsx?$/,
loader: 'babel-loader!ts-loader',
exclude: /node_modules/,
include: path.join(__dirname, 'src')
}
]
}
};
You can use source-map-loader
for webpack. 您可以将source-map-loader
用于webpack。 Here is my webpack.config.js
: 这是我的webpack.config.js
:
module.exports = {
entry: "./app.ts",
output: {
filename: "./bundle.js",
},
devtool: "source-map",
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"]
},
module: {
loaders: [
// ts -> ES6 -> babel -> ES5
{ test: /\.tsx?$/, loaders: ["babel-loader", "ts-loader"] }
],
preLoaders: [
{ test: /\.js$/, loader: "source-map-loader" }
]
}
};
And tsconfig.js
: 和tsconfig.js
:
{
"compilerOptions": {
"target": "es6",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
请参阅loaders: [ // note that babel-loader is configured to run after ts-loader { test: /\\.ts(x?)$/, loader: 'babel-loader!ts-loader' } ]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.