If you need project scaffolding please see here

The initialization

1. Create a new folderreact-scaffold
2. runyarn init -yInitialize the project
3. Installation-dependent dependencies

yarn add rollup rollup-plugin-babel @babel/core @babel/preset-env @babel/preset-react -D 
Copy the code

• rollupProject packaging toolrollup-plugin-babelRollup’s Babel plugin
• @babel/coreThe core library of Babel
• @babel/preset-envDefault escaped ES6 syntax,@babel/preset-reactSupport for JSX

The second configuration

• Babel configuration file.babelrcPut two presets in

{
  "presets": ["@babel/preset-env"."@babel/preset-react"]}Copy the code

• .gitignoreGit ignores files

node_modules/
.idea/
.vscode/
Copy the code

• .yarnignoreYarn Ignores files

src
.gitignore
Copy the code

• rollup.config.js

import babel from 'rollup-plugin-babel'
export default {
  // Core options
  input: './src/index.js'./ / must
  output: {  // Must (if you want to output more than one, can be an array)
    // Core options
    file: './build/bundle.js'./ / must
    format:  'cjs'/ / must
  },
  plugins: [babel()],
  external: ['react']};Copy the code

• package.jsonAdd two scripts

"scripts": {
    "build": "yarn run rollup -c",
    "start": "yarn run rollup -c -w"
  },
Copy the code

Three test

1. New SRC/Components/Button/index. Js

import React from 'react'
const Button = ({children}) = > {
  return (
    <button>{children}</button>)}export default Button
Copy the code

2. Modify the SRC/index. Js

export { default as Button} from './Components/Button/index'
Copy the code

3. yarn build & yarn link

4. Take a react project as an experiment, I will directly use the project scaffolding I built beforeyarn link react-scaffold

import { Button } from 'react-scaffold'<Button> React-scaffold </Button>Copy the code

So we have successfully used this plugin