J'ai ces dépendances:
"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
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();
}());
Avec cette configuration, cela fonctionne, je peux le construire et l'exécuter (journaux 4 correctement). Cependant, je reçois toujours des erreurs sur le 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'.
Il semble que cela ait quelque chose à voir avec babel-polyfill
.
Qu'est-ce que je rate?
(4,32): erreur TS2304: Impossible de trouver le nom 'régénérateurRuntime'.
Il s'agit d'un symptôme selon lequel la sortie de babel
est envoyée à ts
. Cette commande est erronée
Utilisez la configuration décrite ici: http://blog.johnnyreilly.com/2015/12/es6-TypeScript-babel-react-flux-karma.html
Depuis Babel 7, le ts-loader
n'est pas nécessaire, car Babel 7 comprend TypeScript . Les détails complets d'un la configuration de TypeScript + Babel7 + Webpack est ici .
Installez le support TypeScript de Babel. Seulement @babel/preset-TypeScript
est obligatoire; les trois autres ajoutent des fonctionnalités supplémentaires prises en charge par TypeScript.
npm install --save-dev @babel/preset-TypeScript
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/plugin-proposal-class-properties
npm install --save-dev @babel/plugin-proposal-object-rest-spread
Configurez le .babelrc
plugins et presets.
{
"presets": [
"@babel/preset-env",
"@babel/preset-TypeScript"
],
"plugins": [
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"
]
}
Et mettez à jour votre webpack.config.js
(un autre code est omis pour plus de clarté).
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
},
Les chargeurs s'exécutent toujours de droite à gauche.
test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/
Correction du problème car il va s'exécuter ts-loader
première.
Fichier webpack.config.js complet
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/
}],
}
};
Exemple de projet brunolm/TypeScript-babel-webpack