टाइपस्क्रिप्ट + बेबेल + वेबपैक कैसे सेट करें?

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

.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/सूचकांक। टीएस

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 के साथ कुछ है।

मुझे क्या याद आ रही है?

Answer 1

(4,32): त्रुटि टीएस 2304: नाम '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 चलाने जा रहा है।

पूर्ण 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