0
とES2015/stage-0
の構文も使用する私のtypescript
関連の.tsx
ファイルをコンパイルするのにwebpack
を使用しています。webpack経由でtsconfig.jsonのsourceMapオプションをダイナミックにするには?
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
オプションを設定した場合は、次のように私
webpack.config.js
ファイルがありますそれだけでソース・マップが生成されます。私はいくつかのコマンドラインの引数に基づいてそれを動的にしたいと思うし、毎回ハードコードtsconfig.json
ファイルではありません。 どうすればいいですか?また、webpack設定で
preLoaders
オプションをコメントすると、違いはありますか?
あなたのような何かができるコマンドライン・サポートについて > awesome-typescript-loader?sourceMap = process.env.TS_SOURCEMAPS を使用して構築し、 を使用してビルドします。[export | set] TS_SOURCEMAPS = true && webpack –