javascript - วิธีการตั้งค่า 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/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();
}());

ด้วยการตั้งค่านี้มันสามารถทำงานได้ ฉันสามารถสร้างและรันมันได้ (บันทึก 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 ผมกำลังพลาดอะไรไปหรือ?

คำตอบ #1

Babel 7 ไม่ต้องการ ts-loader

ตั้งแต่ Babel 7 เป็นต้นไป ts-loader ไม่จำเป็น เพราะ Babel 7 เข้าใจ TypeScript รายละเอียดครบถ้วนของการตั้งค่า TypeScript + Babel7 + Webpack อยู่ที่นี่

ภาพรวมของการตั้งค่าโดยไม่ใช้ ts-loader

ติดตั้งการสนับสนุน TypeScript ของ Babel จำเป็นต้องใช้เพียง @babel/preset-typescript เท่านั้น ส่วนอีกสามตัวนั้นเพิ่มคุณสมบัติเพิ่มเติมที่ 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

กำหนดค่าปลั๊กอินและพรีเซ็ต .babelrc เพิ่มเติม

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

และอัปเดต webpack.config.js ของคุณ (โค้ดอื่น ๆ ถูกละไว้เพื่อความชัดเจน)

module: {
  rules: [
  {
     test: /\.(js|jsx|tsx|ts)$/,
     exclude: /node_modules/,
     loader: 'babel-loader'
    }
  ]
},
resolve: {
  extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
},

คำตอบ #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.

คำตอบ #3

(4,32): ข้อผิดพลาด TS2304: ไม่สามารถหาชื่อ 'regeneratorRuntime' ได้.

นี่เป็นอาการที่เอาผลลัพธ์ของ babel ไปป้อนให้กับ ts ลำดับนี้ ผิด

แก้ไข

การตั้งค่าการคอมไพล์ของคุณควรส่งผลลัพธ์ของ TS ไปที่ Babel

อีกทางเลือกหนึ่ง คุณสามารถคอมไพล์ TypeScript ด้วย Babel เพียงอย่างเดียวโดยใช้ @babel/preset-typescript

เพิ่มเติม

การคอมไพล์ TypeScript ด้วย Babel : https://babeljs.io/docs/en/babel-preset-typescript