Cách thiết lập TypeScript + Babel + Webpack?

Question

Tôi có những phụ thuộc:

"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(); 
}()); 

Với thiết lập này nó không làm việc, tôi có thể xây dựng và chạy nó (bản ghi 4 chính xác). Tuy nhiên, tôi luôn gặp phải một số lỗi trên 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'. 

Dường như nó có liên quan đến babel-polyfill.

Tôi đang thiếu gì?

Answer 1

(4,32): lỗi TS2304: Không thể tìm thấy tên 'regeneratorRuntime'.

Đây là dấu hiệu cho thấy đầu ra của babel sẽ được cấp cho ts. Lệnh này là sai

Fix

Sử dụng thiết lập như mô tả ở đây: http://blog.johnnyreilly.com/2015/12/es6-typescript-babel-react-flux-karma.html

Answer 2

Máy bốc hàng luôn thực hiện phải sang trái, vì vậy thay đổi để

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

Cố định vấn đề này vì nó là sẽ chạy trước tiên ts-loader.

webpack.config.js Full nộp

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

dự án mẫu brunolm/typescript-babel-webpack