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

·  阅读 145
基于Rollup创建一个插件开发脚手架

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

一 初始化

  1. 新建一个文件夹 react-scaffold
  2. 运行yarn init -y 初始化项目
  3. 安装相关依赖
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"
  },
复制代码

三 测试

  1. 新建src/Components/Button/index.js
import React from 'react'
const Button = ({children}) => {
  return (
    <button>{children}</button>
  )
}
export default Button
复制代码
  1. 修改src/index.js
export { default as Button} from './Components/Button/index'
复制代码
  1. yarn build & yarn link

image.png

  1. 拿一个react项目实验一下,我这里直接用之前搭建的那个项目脚手架yarn link react-scaffold
import { Button } from 'react-scaffold'
<Button>来自于react-scaffold</Button>
复制代码

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

分类:
前端
标签:
分类:
前端
标签: