0
我使用webpack
來編譯我的typescript
相關的.tsx
文件,這些文件也使用jsx
加ES2015/stage-0
語法。如何通過webpack使tsconfig.json中的sourceMap選項變爲動態?
我webpack.config.js
文件如下:
var PATHS = {
"build": path.join(__dirname, 'build'),
"myModule1": path.join(__dirname, 'js', 'module1'),
"myModule2": path.join(__dirname, 'js', 'module2')
}
var scriptIncludes = [PATHS.myModule1,
PATHS.myModule2]
module.exports = {
entry: {
"my-module1": path.join(PATHS.myModule1, 'index.jsx'),
"my-module2": path.join(PATHS.myModule2, 'index.tsx')
},
output: {
filename: '[name].js',
sourceMapFilename: '[name].js.map',
path: PATHS.build
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// resolvable extensions.
// Files with the following extensions are fair game for webpack to process.
extensions: ['', ".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".jsx"],
alias: {
'ie': 'component-ie'
}
},
plugins: [], //plugins,
module: {
loaders: [
{
test: /\.js*/,
include: scriptIncludes,
loader: "babel-loader", query: { presets: ['react', 'es2015', 'stage-0'] }
},
{
// The loader that handles ts and tsx files. These are compiled
// with the awesome-typescript-loader and the output is then passed through to the
// babel-loader. The babel-loader uses the es2015, react and stage-0 presets
// in order that jsx and es6 are processed.
// Note that order of loader processing is from right to left.
test: /\.ts(x?)$/,
include: scriptIncludes,
loader: 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-0!awesome-typescript-loader'
}],
preLoaders: [
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" }
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};
我tsconfig.json
文件如下:
{
"compilerOptions": {
"outDir": "./build/",
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true,
"jsx": "react"
},
"exclude": [
"node_modules"
]
}
現在:
如果我在
tsconfig.json
真正的設置sourceMap
選項,只有源圖纔會生成。我想根據一些命令行參數使其動態化,而不是每次都在tsconfig.json
文件中對其進行硬編碼。 我該如何做到這一點?另外,如果我在webpack配置中評論
preLoaders
選項,它會有什麼區別嗎?
對於命令行支持,你可以做類似 > awesome-typecript-loader?sourceMap = process.env.TS_SOURCEMAPS 並使用 > [export | set] TS_SOURCEMAPS = true && webpack –