如何通过 webpack 使 tsconfig.json 中的 sourceMap 选项动态化?
How to make sourceMap option in tsconfig.json dynamic via webpack?
我正在使用 webpack
编译我的 typescript
相关 .tsx
文件,这些文件也使用 jsx
加上 ES2015/stage-0
语法。
我的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-typescript-loader?sourceMap=false
我正在使用 webpack
编译我的 typescript
相关 .tsx
文件,这些文件也使用 jsx
加上 ES2015/stage-0
语法。
我的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-typescript-loader?sourceMap=false