Duan Hong +

Babel5 => Babel6

TL;DR

Babel5 => Babel6

Babel5 配置文件 .babelrc

// babel stage
stage: 0,
// some ENV relative configuration
env: {
  // dev only  
  development: {
      // HMR related config
      plugins: ['react-transform'],
          extra: {
              'react-transform': [{
                  target: 'react-transform-hmr',
                  imports: ['react'],
                  locals: ['module']
              }]
          }
      }
   }
}

Babel6 配置文件 .babelrc

presets: [
  // let, const, destructuring, classes, modules
  'es2015',
  // exponentiation
  'es2016',
  // JSX, Flow
  'react',
  // more draft es features
  'stage-0',
],
env: {
development: {
  plugins: [
    ['react-transform', {
      transforms: [{
        transform: ‘react-transform-hmr',
        imports: ['react'],
        locals: ['module']
      }]
    }]
  ],
}
},
plugins: [
  // function x(a, b, c,) { }
  'syntax-trailing-function-commas',
  // await fetch()
  'syntax-async-functions',
  // function* () { yield 42; yield 43; }
  'transform-regenerator',
  // Polyfills the runtime needed for async/await and generators
  ['transform-runtime'), {
    helpers: false,
    polyfill: false,
    regenerator: true
  }],
  'transform-decorators-legacy',
  'add-module-exports',
]

一些差异

热更新

上面 ENV 中的配置都是为了支持开发时的组件热更新

Wanna say something ?

Blog

Friends