伙计们,当我使用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;