Wie wird TypeScript + Babel + Webpack eingerichtet?

Question

Ich habe diese Abhängigkeiten:

"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/index. ts

Mit diesem Setup funktioniert es, ich kann es erstellen und ausführen (logs 4 korrekt). Allerdings bin ich immer einige Fehler auf webpack bekommen:

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'. 

Es scheint, es hat etwas mit babel-polyfill zu tun hat.

Was fehlt mir?

Answer 1

(4,32): Fehler TS2304: Name 'RegeneratorRuntime' kann nicht gefunden werden.

Dies ist ein Symptom, das die Ausgabe von babel wird ts gefüttert zu werden. Dieser Auftrag ist falsch

Fix

Verwendung als das Setup hier beschrieben: http://blog.johnnyreilly.com/2015/12/es6-typescript-babel-react-flux-karma.html

Answer 2

Lader immer richtig ausführen zu verlassen, verändert sich so zu

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

das Problem behoben, da es Gehen zuerst ts-loader laufen.

Voll webpack.config.js Datei

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/ 
    }], 
    } 
}; 

Beispielprojekt brunolm/typescript-babel-webpack