Babel 6 轉換運行時：$export 不是函數 (Babel 6 transform-runtime: $export is not a function)

問題描述

Babel 6 轉換運行時：$export 不是函數 (Babel 6 transform‑runtime: $export is not a function)

我正在嘗試合併 Babel 的轉換運行時以使我的代碼與 IE9 兼容。但是自從集成它之後，代碼甚至無法在 Chrome 上運行。我在 es6.object.define‑property.js:3 上收到錯誤 Uncaught TypeError: $export is not a function。如果我的 .babelrc 中沒有“transform‑runtime”行，一切都運行良好。有什麼想法嗎？

這是我的 .babelrc:

{
  "plugins": [
    "transform‑runtime"
  ],
  "presets": [
    "es2015",
    "react"
  ]
}

還有我的 webpack.config.js:

var webpack = require('webpack');

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
  entry: {
    EventAdmin: './src/event_admin',
    EventRender: './src/event_render'
  },
  output: {
    path: '../public/js2',
    filename: '[name].js' // Template based on keys in entry above
  },
  externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    'jquery': 'jQuery'
  },
  plugins: [commonsPlugin],
  devtool: 'source‑map',
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style‑loader!css‑loader' },
      {
        test: /\.js$/,
        loader: 'babel‑loader'
      },
    ]
  }
};

參考解法

方法 1:

Try adding exclude: /node_modules/ after loader: 'babel‑loader'. I had the same problem when trying to run the runtime transformer without excluding node_modules. I am not aware of the underlying problem, though.

方法 2:

Hello I have the same issue and finally found a solution that works for me. See:

loaders: [
  {
    test: /.js/,
    loader: 'babel',
    query: {
      presets: ['es2015', 'es2017'],
      plugins: [
        ['transform‑runtime', {
          helpers: false,
          polyfill: false,
          regenerator: true, }],
        'transform‑es2015‑destructuring',
        'transform‑object‑rest‑spread',
        'transform‑async‑to‑generator',
        ],
     },
  },
]

See the 'transform‑runtime' part. I hope this helps.

方法 3:

You can try replace "exclude" by "include", following the recomendations from documentation.

Try to prefer "include" when possible...

This worked for me.

{
  "test": /\.js/,
  "loader": "babel",
  "include": [path.resolve(__dirname, './src')]
}

方法 4:

At first you must installed babel‑plugin‑transform‑runtime and then use it like me:

{
  "presets": [
    "es2015",
    "react",
    "stage‑0"
  ],
  "plugins": [
    "transform‑runtime"
  ]
}

After it you must add exclude key to your babel‑loader inside webpack configuration file:

{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: [
        {
            loader: 'babel‑loader',
        }
    ]
}

Attention: please write /node_modules/ not /(node_modules\/)/ or /node_modules\//, it's weird but this way works.

方法 5:

It looks to be a problem with running core‑js files through Babel 6 because Babel 6 no longer converts require('something') to require('something').default as Babel 5 did. I even tried running it through this plugin https://www.npmjs.com/package/babel‑plugin‑add‑module‑exports but no matter what I did, it wouldn't correct the require statements properly. I ultimately just had to exclude the core‑js and various Babel related files from being processed by the babel‑loader by setting the exclude property to this:

[ /node_modules\/babel‑/m, /node_modules\/core‑js\//m, /node_modules\/regenerator‑runtime\//m ]

As a side note, I hadn't reinstalled my node_modules since converting to Babel 6 and that caused the same issue but for some other mysterious reason.

(by Ted Avery、Pierre Wahlgren、Carlos Galarza、André Moraes、AmerllicA、Resist Design)

參考文件

1. Babel 6 transform‑runtime: $export is not a function (CC BY‑SA 2.5/3.0/4.0)