基于Rollup创建一个插件开发脚手架

我能熬又能学

2021-09-13 902 阅读1分钟

如果需要项目脚手架请看这里

一初始化

新建一个文件夹 react-scaffold
运行yarn init -y 初始化项目
安装相关依赖

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

rollup项目打包工具 rollup-plugin-babel rollup的babel插件
@babel/core babel的核心库
@babel/preset-env 预设可转义ES6语法,@babel/preset-react 对jsx的支持

二配置

Babel 配置文件 .babelrc,把两个预设写进去

{
  "presets": ["@babel/preset-env","@babel/preset-react"]
}

.gitignore git忽略文件

node_modules/
.idea/
.vscode/

.yarnignore yarn忽略文件

src
.gitignore

rollup.config.js

import babel from 'rollup-plugin-babel'
export default {
  // 核心选项
  input: './src/index.js',     // 必须
  output: {  // 必须 (如果要输出多个，可以是一个数组)
    // 核心选项
    file: './build/bundle.js',    // 必须
    format:  'cjs'// 必须
  },
  plugins: [babel()],
  external: ['react'],
};

package.json 新增两个script

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

三测试

新建src/Components/Button/index.js

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

修改src/index.js

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

yarn build & yarn link

拿一个react项目实验一下，我这里直接用之前搭建的那个项目脚手架yarn link react-scaffold

import { Button } from 'react-scaffold'
<Button>来自于react-scaffold</Button>

可见我们已经成功的用上这个插件了

友情链接：