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" 
} 

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/인덱스

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

tsconfig.json

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

.babelrc. 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 개). 그러나 나는 항상 웹팩에 약간의 오차가 받고 있어요 : babel-polyfill 함께 할 수있는 뭔가가 보인다

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

.

무엇이 누락 되었습니까?

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을 실행합니다. { 로더 : [{ 시험 : /\.ts$

전체 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