TypeScript + Babel + Webpackのセットアップ方法は？

Question

私はこれらの依存関係があります。

"devDependencies": { 
    "@types/node": "^4.0.27-alpha", 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-polyfill": "^6.9.1", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-stage-0": "^6.5.0", 
    "ts-loader": "^0.8.2", 
    "typescript": "^2.0.0", 
    "webpack": "^1.13.1" 
} 

.babelrc

{ 
    "presets": [ 
    "es2015", 
    "stage-0" 
    ] 
} 

tsconfig.json

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "target": "es6", 
     "noImplicitAny": false, 
     "sourceMap": false, 
     "outDir": "built" 
    }, 
    "exclude": [ 
     "node_modules" 
    ] 
} 

webpack.config.js

module.exports = { 
    entry: ['babel-polyfill', './src/'], 
    output: { 
    path: __dirname, 
    filename: './built/bundle.js', 
    }, 
    resolve: { 
    modulesDirectories: ['node_modules'], 
    extensions: ['', '.js', '.ts'], 
    }, 
    module: { 
    loaders: [{ 
     test: /\.tsx?$/, loaders: ['ts-loader', 'babel-loader'], exclude: /node_modules/ 
    }], 
    } 
}; 

/SRC /インデックスを。 ts

async function foo() { 
    const value = await bar(); 
    console.log(value); 
} 

function bar() { 
    return new Promise((resolve, reject) => { 
    return resolve(4); 
    }); 
} 

(async function run() { 
    await foo(); 
}()); 

この設定では動作しますが、ビルドして実行することができます（正しくログするには4）。しかし、私はいつものWebPACKにいくつかのエラーを取得しています：

ERROR in ./src/index.ts 
(4,32): error TS2304: Cannot find name 'regeneratorRuntime'. 

ERROR in ./src/index.ts 
(6,12): error TS2304: Cannot find name 'regeneratorRuntime'. 

ERROR in ./src/index.ts 
(31,451): error TS2346: Supplied parameters do not match any signature of call target. 

ERROR in ./src/index.ts 
(40,33): error TS2304: Cannot find name 'regeneratorRuntime'. 

ERROR in ./src/index.ts 
(41,12): error TS2304: Cannot find name 'regeneratorRuntime'. 

babel-polyfillとは何かを持っているようです。

私には何が欠けていますか？

Answer 1

（4,32）：エラーTS2304：「regeneratorRuntime」という名前が見つかりません。

これはbabelの出力がtsに送られているという症状です。それがあるので、http://blog.johnnyreilly.com/2015/12/es6-typescript-babel-react-flux-karma.html

Answer 2

ローダーは常に、左から右に実行ので

test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/ 

に変更する問題を修正：この順序は、間違っ

修正

使用ここで説明するように設定されまずts-loaderを実行します。

全webpack.config.jsファイル

module.exports = { 
    entry: ['babel-polyfill', './src/'], 
    output: { 
    path: __dirname, 
    filename: './dist/index.js', 
    }, 
    resolve: { 
    extensions: ['', '.js', '.ts'], 
    }, 
    module: { 
    loaders: [{ 
     test: /\.ts$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/ 
    }], 
    } 
}; 

何それがこのように行われている場合 ` モジュールのサンプルプロジェクトbrunolm/typescript-babel-webpack