Webpack babel 6 ES6 มัณฑนากร

ฉันมีโปรเจ็กต์ที่เขียนด้วย ES6 โดยมี webpack เป็นบันเดิลเลอร์ การถ่ายโอนข้อมูลส่วนใหญ่ทำงานได้ดี แต่เมื่อฉันพยายามรวมมัณฑนากรไว้ที่ใดก็ได้ฉันได้รับข้อผิดพลาดนี้:

Decorators are not supported yet in 6.x pending proposal update.

ฉันได้ตรวจสอบตัวติดตามปัญหาของ babel แล้วและไม่พบสิ่งใดในนั้นดังนั้นฉันจึงคิดว่าฉันใช้ผิด การกำหนดค่า webpack ของฉัน (บิตที่เกี่ยวข้อง):

loaders: [
  {
    loader: 'babel',
    exclude: /node_modules/,
    include: path.join(__dirname, 'src'),
    test: /\.jsx?$/,
    query: {
      plugins: ['transform-runtime'],
      presets: ['es2015', 'stage-0', 'react']
    }
  }
]

ฉันไม่มีปัญหากับสิ่งอื่นใดฟังก์ชันลูกศรการทำลายทุกอย่างทำงานได้ดีนี่เป็นสิ่งเดียวที่ใช้ไม่ได้

ฉันรู้ว่าฉันสามารถปรับลดรุ่นเป็น babel 5.8 ได้ตลอดเวลาที่ฉันใช้งานได้เมื่อไม่นานมานี้ แต่ถ้ามีวิธีใดที่จะทำให้สิ่งนี้ใช้งานได้ในเวอร์ชันปัจจุบัน (v6.2.0) ก็จะช่วยได้

ปลั๊กอิน Babel นี้ใช้ได้กับฉัน:

https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

npm i --save-dev babel-plugin-transform-decorators-legacy

.babelrc

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": [
    ["transform-decorators-legacy"],
    // ...
  ]
}

หรือ

Webpack

{
  test: /\.jsx?$/,
  loader: 'babel',
  query: {
    cacheDirectory: true,
    plugins: ['transform-decorators-legacy' ],
    presets: ['es2015', 'stage-0', 'react']
  }
}

ตอบสนองดั้งเดิม

ด้วยreact-nativeคุณต้องใช้babel-preset-react-native-stage-0ปลั๊กอินแทน

npm i --save babel-preset-react-native-stage-0

.babelrc

{
  "presets": ["react-native-stage-0/decorator-support"]
}

โปรดดูคำถามนี้และคำตอบสำหรับคำอธิบายที่สมบูรณ์

หลังจากใช้เวลา 5 นาทีใน webchat ที่หย่อนของ babeljs ฉันพบว่ามัณฑนากรเสียใน babel เวอร์ชันปัจจุบัน (v6.2) ทางออกเดียวที่ดูเหมือนว่าจะปรับลดรุ่นเป็น 5.8 ในขณะนี้

ดูเหมือนว่าพวกเขาจะย้ายตัวติดตามปัญหาจาก github ไปที่https://phabricator.babeljs.io

ฉันเขียนทั้งหมดนี้ลงเนื่องจากหลังจากการค้นหาหลายชั่วโมงฉันพบว่าเอกสารปัจจุบันแย่มากและขาดหายไป

การติดตั้งเพียงอย่างเดียวbabel-plugin-transform-decorators-legacyไม่ได้ผลสำหรับฉัน (ฉันมีการกำหนดค่าโดยใช้เอนไซม์ร่วมกับกรรม) ปรากฎว่ามีการติดตั้งtransform-class-properties: transform-class-propertiesและตรวจสอบให้แน่ใจว่าปลั๊กอินเดิมอยู่ก่อนปลั๊กอิน transform class ตามเอกสารในtransform-decorators-legacyในที่สุดก็ใช้งานได้สำหรับฉัน

ฉันไม่ได้ใช้.babelrcไฟล์ แต่การเพิ่มสิ่งนี้ลงในkarma.conf.jsไฟล์ของฉันได้ผลสำหรับฉัน:

babelPreprocessor: {
  options: {
    presets: ['airbnb', 'es2015', 'stage-0', 'react'],
    plugins: ["transform-decorators-legacy", "transform-class-properties"]
  }
}

ฉันยังเพิ่มลงในรถตักของฉัน:

loaders: [
  {
    test: /\.js$/,
    loader: 'babel',
    exclude: path.resolve(__dirname, 'node_modules'),
    query: {
      presets: ['airbnb', 'es2015', 'stage-0', 'react'],
      plugins: ["transform-decorators-legacy", "transform-class-properties"]
    }
  },

คุณเพียงแค่ต้องมีปลั๊กอินแปลงตกแต่งตกแต่ง: http://babeljs.io/docs/plugins/transform-decorators/

ถ้าคุณปรับรุ่นโครงการของคุณจาก Babel 6 ถึง 7 Babel @babel/plugin-proposal-decoratorsแล้วคุณต้องการที่จะติดตั้ง

หากคุณต้องการสนับสนุนมัณฑนากรแบบดั้งเดิมตามที่ใช้ใน Babel 5 คุณต้องกำหนดค่า.babelrcดังต่อไปนี้:

plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
]

ตรวจสอบให้แน่ใจว่า@babel/plugin-proposal-decoratorsมาก่อน@babel/plugin-proposal-class-propertiesในกรณีที่คุณใช้ประโยชน์อย่างหลัง