Конфигурация babel7 для новых целевых узлов завершается неудачно в операторах `import` - PullRequest
Новая
       1

Конфигурация babel7 для новых целевых узлов завершается неудачно в операторах `import`

1 голос
/ 31 марта 2020

При создании моего node api с webpack, babel и node v12.13 я получаю эту ошибку: 

Module build failed (from /../node_modules/babel-loader/lib/index.js):TypeError: /../src/handler.js:
Property name expected type of string but got null

Это, похоже, связано с утверждениями ES6 import в источнике файлы.

Ниже приведена конфигурация, с которой я закончил. Исходя из этого, единственное, что заставляет его работать, это установка { targets: { node: 6 }}, но мне нужно установить целевое значение v12.

Я не нашел соответствующего обсуждения. В чем может быть причина этой проблемы? Это пакет внутри yarn workspace, но я думаю, что это не имеет значения.

.babelr c: (находится в пакете API root, тот же результат с .babelrc.js или babel.config.json) 

  comments: false,
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current'
        }
      }
    ]
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-transform-regenerator',
    '@babel/plugin-transform-modules-commonjs',
    '@babel/plugin-proposal-object-rest-spread',
    'source-map-support'
  ]

webpack.config. js: 

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const slsw = require('serverless-webpack')
const webpack = require('webpack')

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
  optimization: {
    minimize: false
  },
  performance: {
    hints: false
  },
  devtool: slsw.lib.webpack.isLocal ? 'eval-source-map' : 'none',
  externals: [
    nodeExternals({ whitelist: ['workspace-package-b'] }),
    nodeExternals({
      modulesDir: path.resolve(__dirname, '../../node_modules'),
      whitelist: ['workspace-package-b']
    })
  ],
  module: {
    rules: [
      {
        test: /\.graphql$/,
        loader: 'graphql-tag/loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['imports-loader?graphql', 'babel-loader']
      }
    ]
  },
  output: {
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
    sourceMapFilename: '[file].map'
  },
  plugins: [new webpack.DefinePlugin({ 'global.GENTLY': false })]
}

Соответствующий пакет. json: 

(dependencies)
"babel-runtime": "^6.26.0",
"core-js": "^3.6.4",
(devDependencies)
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
"@babel/plugin-transform-modules-commonjs": "^7.9.0",
"@babel/plugin-transform-regenerator": "^7.8.7",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"babel-jest": "24.9.0",
"babel-loader": "8.1.0",
"babel-plugin-source-map-support": "^2.0.1",
"jest": "24.9.0",
"webpack": "4.19.1",
"webpack-node-externals": "^1.7.2"

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Оказывается, суть заключается в следующем:

Я изначально добавил эти плагины, потому что шутка жаловалась на просмотр import. 

    '@babel/plugin-transform-runtime',
    '@babel/plugin-transform-regenerator',
    '@babel/plugin-transform-modules-commonjs'

Но потом я понял, что это теперь сломалось моя обычная сборка webpack.

Кажется, что с этим связаны две проблемы:

  • как webpack относится к jest :

webpack 2 предлагает встроенную поддержку модулей ES. Однако Jest работает в Node, и поэтому требует переноса модулей ES в общие JS модули.

Следующее .babelrc.js решает эту проблему для меня: 

/*
 * webpack 2 offers native support for ES modules. However, Jest runs in Node,
 * and thus requires ES modules to be transpiled to CommonJS modules.
 *
 * Reads:
 * https://jestjs.io/docs/en/webpack
 * https://github.com/facebook/jest/issues/6229
 *
 */
const configByEnv = isTest => {
  // https://babeljs.io/docs/en/babel-preset-env#targets
  // "Sidenote, if no targets are specified, @babel/preset-env will transform
  // all ECMAScript 2015+ code by default."
  const targets = isTest ? {} : { node: 'current' }

  const addPlugins = isTest
    ? [
        '@babel/plugin-transform-runtime',
        '@babel/plugin-transform-regenerator',
        '@babel/plugin-transform-modules-commonjs'
      ]
    : []

  return {
    comments: false,
    presets: [['@babel/preset-env', { targets }]],
    plugins: [
      ...addPlugins,
      '@babel/plugin-proposal-object-rest-spread',
      'source-map-support'
    ]
  }
}

module.exports = api => {
  const isTest = api.env('test')

  return configByEnv(isTest)
}
0 голосов
/ 31 марта 2020

эта форма файла конфигурации .babelrc устарела, вместо того, чтобы использовать один символ js рекомендует babel.config.js, с этой "формой", если вы хотите так ее назвать, есть одна классная особенность. вы получаете парам, в котором есть довольно много хитростей, которые вы можете использовать.

... Кстати, вам не хватает @ babel / cli, @ babel / runtime @ babel / core, babel-core@7.0.0-bridge.0

    "use strict";

    module.exports = function (api) {
      const {NODE_ENV} = process.env;

      api.cache(()=>NODE_ENV)
      api.env()

      if (NODE_ENV === "development") {
         api.async();
      }

      return {
    plugins: [],
    presets: []
      }
    }
...