rollup+flow+babel 搭建开发minireact环境

562 阅读1分钟

1 babel安装

参考 babeljs.io/docs/en/usa… 即可

2 安装rollup

a. 安装 npm install --save-dev rollup rollup-plugin-node-resolve rollup-plugin-babel rollup-plugin-serve rollup-plugin-livereload b, 建立 rollup.dev.js

// rollup.config.js
// import json from "rollup-plugin-json";
import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";

module.exports = {
  input: "src/index.js",
  output: {
    file: "example/bundle.js",
    format: "umd",
    name: "minireact"
  },
  plugins: [
    resolve(),
    babel({
      exclude: "node_modules/**" // only transpile our source code
    }),
    serve("example"),
    livereload({
      watch: "example"
    })
  ]
};

c, 在package.json 中配置如下

"scripts": {
    "test": "npm run lint && flow check",
    "lint": "eslint src",
    "start": "rollup -w -c --config ./conf/rollup.dev.js",
    "build": "rollup -c --config ./conf/rollup.prod.js",
    "prebuild": "flow check"
  },

执行npm start 的时候,就会自动检测打包之后的文件变化,

image.png

添加flow

a, 安装 npm install @babel/preset-flow flow-bin b, 在babel.config.js中添加

image.png
c, 在package.json 中添加
image.png
执行flow check即可。