ReferenceError: babelHelpers is not defined

moonrailgun commented 5 years ago

当我的项目迁移到babel7后。获取数据的时候出现

ReferenceError: babelHelpers is not defined错误

应该如何解决这个问题？求教

sunnylqm commented 5 years ago

应该是需要这个 https://babeljs.io/docs/en/next/babel-plugin-transform-runtime.html

moonrailgun commented 5 years ago

用了的，这是我的配置 helper设为false因为这边一设为true就会报错：就很迷茫，求指教

sunnylqm commented 5 years ago

https://github.com/webpack/webpack/issues/4039#issuecomment-419284940

moonrailgun commented 5 years ago

试过了网络上的解决方案都不好使。尝试将整个项目从commonjs迁移到esmodule后也无法解决问题

主要是babelHelpers上的矛盾。要么与url-loader产生矛盾，要么与babel-runtime产生矛盾

最后放弃使用编译后的版本，直接引入源码版本自行通过webpack编译后成功解决问题react-native-storage/src/storage（临时解决方案）最后的配置版本如下:

{
        test: /\.(js|jsx)?$/,
        loader: 'babel-loader',
        exclude: path.resolve(ROOT_PATH, './node_modules/**'),
        query: {
          babelrc: false,
          compact: false,
          presets: ['@babel/preset-env', '@babel/preset-react'],
          ignore: [/[\/\\]core-js/, /@babel[\/\\]runtime/],
          plugins: [
            [
              '@babel/plugin-transform-runtime',
              {
                helpers: true,
              },
            ],
            'transform-class-properties',
            '@babel/plugin-transform-modules-commonjs',
            'dynamic-import-webpack',
          ],
        },
      }

moonrailgun commented 5 years ago

如果有更好的解决方案希望能告知 :)

sunnylqm commented 5 years ago

感觉还是配置不对

moonrailgun commented 5 years ago

我感觉还是你项目编译时rollup引入了一个全局的babelhelpers，但是没有做额外处理的问题。如果没法给插件提供一个全局的babelHelpers的话就会出问题。

建议其实可以考虑使用别的方式来转换es6语法来发布包。

https://github.com/sunnylqm/react-native-storage/blob/8b66e807866babd4902de0d977e43bb188e4a9a0/rollup.config.js#L30-L31

sunnylqm commented 5 years ago

babelHelpers应该由babel-plugin-transform-runtime来提供，否则有很多冗余代码什么情况下不能提供babelHelpers？（按正常配置来说）

moonrailgun commented 5 years ago

我注意到react-native编译时似乎原生提供了一个全局的babelHelpers对象。但是似乎在web端的编辑不通过一些特殊的操作无法创建一个全局的babelHelpers来处理这个问题。是否需要考虑到web端的实现呢？

以该项目唯一用到的objectSpread为例: react-native的babelHelpers定义: https://github.com/facebook/react-native/blob/d9711e269355c9284d398e5ec6993cfbbcafe0e2/Libraries/polyfills/babelHelpers.js#L51

objectSpread定义: https://github.com/facebook/react-native/blob/d9711e269355c9284d398e5ec6993cfbbcafe0e2/Libraries/polyfills/babelHelpers.js#L572-L596

关于babel-plugin-transform-runtime helper的处理过程似乎不会去声明一个全局的babelHelpers对象来处理这个行为，但如果将需要转化的代码由transform-runtime插件处理不会出现问题。

而编译后的文件会把{...a}这样的对象展开操作编译成babelHelpers.objectSpread

总之，我不认为这是一个合理的行为，如果本项目还需要兼容web app的实现的话(虽然项目名字明确说明了这是一个react-native插件)。

sunnylqm commented 5 years ago

有道理，感谢分析，我有空来处理

sunnylqm commented 5 years ago

试下1.0.1版本

moonrailgun commented 5 years ago

新版本已修复

sunnylqm / react-native-storage

ReferenceError: babelHelpers is not defined #217