2016-07-12 32 views
11

我有这些依赖关系:如何设置TypeScript + Babel + Webpack?

"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

我错过了什么?

回答

17

装载机始终执行从右到左,所以改为

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

+1

如果不能做到这样 ' 模块:{ 装载机:[{ 测试:/\.ts$ /,加载器:['ts-loader'],排除:/ node_modules/ }, 测试:/\.js*/,loader:“babel-loader”,query:{presets:['react', 'es2015','stage-0']} }], } ' –