Плагин babel Синтаксическая ошибка при использовании response-styleguidist со сверткой и babel - PullRequest
Новая
       37

Плагин babel Синтаксическая ошибка при использовании response-styleguidist со сверткой и babel

0 голосов
/ 13 апреля 2019

Мой код реагирования не может быть корректным при использовании rollup-plugin-babel. Я пытался собрать lib, используя rollup -c -w, но он не работает с кодом babel plugin Syntax error.

То же самое происходит, когда я просто пытаюсь запустить styleguidist server --open, но здесь я получаю (babel-loader) синтаксическую ошибку.

Правильно ли я настраиваю babel с помощью react-styleguidist и rollup?

Вот соответствующий код.

rollup.config.js 

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import flow from 'rollup-plugin-flow';
import nodeResolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';
import uglify from 'rollup-plugin-uglify';
import svgr from '@svgr/rollup';
import url from 'rollup-plugin-url';

import pkg from './package.json';

const env = process.env.NODE_ENV;

export default {
  input: 'src/lib/index.js',
  output: [
    {
      // file: 'dist/index.js',
      file: pkg.main,
      format: 'cjs',
      sourcemap: true
    },
    {
      // file: 'dist/index.js',
      file: pkg.module,
      format: 'es',
      sourcemap: true
    }
],
  plugins: [
    url(),
    svgr(),
    replace({'process.env.NODE_ENV': JSON.stringify(env) }),
    nodeResolve(),
    flow(),
    babel({
      plugins: [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-syntax-dynamic-import"
      ],
      exclude: 'node_modules/**',
      runtimeHelpers: true
    }),
    commonjs(),
    env === 'production' && uglify()
  ],
  external: ['react', 'react-dom']
};

styleguide.config.js 

const path = require('path');

const {
  createConfig, babel, setOutput, match, file
} = require('webpack-blocks');

const pkg = require('./package.json');

const webpackConfig = createConfig([
  setOutput('./build/bundle.js'),
  babel(),
  match(['*.gif','*.jpeg','.*.png','.*.svg','.*.webp'], [
    file(),
  ])
])

module.exports = {
  title: `${pkg.name} v${pkg.version}`,
  components: 'src/lib/components/**/[A-Z]*.js',
  moduleAliases: {
    [pkg.name]: path.resolve(__dirname, 'src/lib')
  },
  webpackConfig: webpackConfig,
    getExampleFilename(componentPath) {
    return componentPath.replace(/\.js?$/, '.examples.md')
  },
  getComponentPathLine(componentPath) {
    const name = path.basename(componentPath, '.js')
    return `import { ${name} } from '${pkg.name}';`
  },
  require: [
    path.resolve(__dirname, 'styleguide/assets/globals.js')
  ]
}

babel.config.js 

module.exports = function(api) {
  api.version();
  api.env();
  api.assertVersion("^7.2");
  api.cache(true);
  api.cache(() => proces.env.NODE_ENV === "development")

  const presets = [
    [
      "@babel/env",
      {
        "modules": false
        // useBuiltIns: 'usage'
      }
    ],
    "@babel/preset-react"
  ];
  const plugins = [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-syntax-dynamic-import"
  ];
  return {
    presets,
    plugins
  }
}

Button.js 

/* Folder setup:
* src/lib/index.js                    // => export { default as Button } from './components/Button';
* src/lib/components/Button/index.js  // => export { default } from './Button';
* src/lib/components/Button/Button.js // => Button.js
*/

import React from 'react';

const Button = ({
  onClick,
  disabled,
  text,
  type,
  ...props
}) => (
  <button  // [ERROR]: here it breaks
    onClick={onClick}
    disable={disabled}
    type={type}
    {...props}
  >
    {text}
  </button>
)

export default Button;
...