parcel+koa+nodemon 快速搭建react开发环境

目录结构

server

启动脚本server/index.js

const Koa = require('koa')
const serve = require('koa-static')
const Bundler = require('parcel-bundler')
const { resolve } = require('path')

const app = new Koa()

// 返回 入口文件(index.html) 的路径
const r = path => resolve(__dirname, path)
//使用 API 替代 CLI 来初始化 bundler 对象，以获取更高级的使用方式(例如：在每次构建时进行自定义操作)

// 提供 1入口文件路径 和 2选项 来初始化 => bundler
const bundler = new Bundler(r('../src/index.html'), {
  publicUrl: '/', // 静态资源的 url ，默认为 dist
  watch: true // 是否需要监听文件并在发生改变时重新编译它们，
})

const bundle = async () => {
  console.log('开始打包');
  await bundler.bundle()
}
bundle()

//静态文件服务器
app.use(serve(r('../dist/')))

app.listen(4455)
复制代码

src

src/index.html

  <div id="app">
    hello world
  </div>
  <script src="./index.js"></script>
复制代码

src/index.js

import React from 'react';
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.querySelector('#app'))
复制代码

src/App.js

import React, { Component } from 'react';
import './app.scss'

class App extends Component{
  constructor(props){
    super(props)
    this.state = {
      val:new Date().toLocaleTimeString()
    }
  }

  componentDidMount(){
    setInterval(() => {
      this.setState({
        val: new Date().toLocaleTimeString()
      })
    }, 1000);
  }
  render(){
    return (
      <div>当前时间：{this.state.val}</div>
    )
  }
}

export default App;
复制代码

src/app.scss

div{
  font-size: 40px;
  color:orange
}
复制代码

配置文件

.babelrc

{
  "presets": [
    "env",
    "stage-0",
    "react"
  ],
  "plugins": [
      "transform-runtime",
      "transform-class-properties"
  ]
}
复制代码

nodemon.json

{
  "restartable": "rs",
  "ignore": [
    ".git",
    "node_modules/**/node_modules"
  ],
  "verbose": true,
  "execMap": {
    "js": "node --harmony"
  },
  "watch": [
    "server/",
    "src/"
  ],
  "ext": "js json"
}
复制代码

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer'), //自动加前缀
    require('cssnext')
  ]
}
复制代码

package,json

{
  "name": "todo",
  "version": "1.0.0",
  "main": "index.js",
  "author": "dsying",
  "license": "MIT",
    "scripts": {
      "start": "rm -rf dist && rm -rf .cache && set NODE_ENV=development && nodemon ./server/index.js",
      "build": "rm -rf dist && parcel build src/index.html --no-cache -d dist --public-url /"
    },
    "dependencies": {
      "koa": "^2.6.2",
      "koa-static": "^5.0.0",
      "react": ">=16.0.0",
      "react-dom": ">=16.0.0",
      "react-router-dom": "^4.3.1"
    },
    "devDependencies": {
      "autoprefixer": "^9.4.3",
      "babel-core": "^6.26.3",
      "babel-eslint": "^10.0.1",
      "babel-loader": "^8.0.4",
      "babel-plugin-transform-class-properties": "^6.24.1",
      "babel-plugin-transform-decorators-legacy": "^1.3.5",
      "babel-plugin-transform-runtime": "^6.23.0",
      "babel-polyfill": "^6.26.0",
      "babel-preset-env": "^1.7.0",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-0": "^6.24.1",
      "node-sass": "^4.11.0",
      "nodemon": "^1.18.9",
      "parcel-bundler": "^1.10.3",
      "postcss-preset-env": "^6.5.0"
    }
}
复制代码

使用

安装

$ yarn install
$ npm install
复制代码

运行

$ npm run start
复制代码