使用Poi，用最少的配置搭建一个React开发环境

Fuyutsuki_98
1,233 阅读4分钟

Poi是我去年在GitHub上发现的一个零配置打包器，基于Webpack构建。它几乎能够胜任大部分项目的打包工作，而且几乎不需要配置。接下来我就教大家如何自己动手基于Poi搭建一个React开发环境. (不使用create-poi-app脚手架). 教程中的源代码存储在我的repo中, 链接: KsRyY/poi-react-example.

1. 准备工作

首先我推荐大家使用yarn@1作为npm的替代, 并且这篇文章中的所有命令都会使用yarn. 但是, npm的等价命令同样也能工作 (如有例外会明确指出).

初始化package.json

{
    "name": "poi-react",
    "version": "0.0.0",
    "main": "src/index.jsx"
}

安装依赖

yarn add react react-dom
yarn add --dev poi

基础模板

src/App.jsx

import React from 'react'

function App() {
    return (
        <div className="app">
            <h1>Poi + React</h1>
        </div>
    )
}

export default App

src/index.jsx

import React from 'react'
import ReactDOM from 'react'
import App from './App'

ReactDOM.render(<App />, document.querySelector('#app'))

配置入口点

poi.config.js

module.exports = {
    entry: 'src/index.jsx'
}

测试运行

使用如下命令启动开发服务器:

yarn run poi --serve
# 等价的npm命令为
npx poi --serve

打开localhost:4000查看效果:

效果

(请忽略那个192.168.100.104:4000的网址, 因为poi在某些情况下可能无法通过localhost:4000来访问, 这时请查看poi的输出中的On Your Local Network后面的网址进行访问)

构建生产版本

使用如下命令来让Poi构建生产版本的应用程序:

poi --prod

打包完毕的文件默认输出在dist文件夹中, 结构应该看上去像这个样子 (文件名因人而异):

dist
├── assets
│   ├── css
│   │   └── index.47a5a235.chunk.css
│   └── js
│       ├── chunk-vendors.84773097.chunk.js
│       ├── chunk-vendors.84773097.chunk.js.LICENSE.txt
│       ├── index.47a5a235.chunk.js
│       └── runtime~index.b13bccd6.js
└── index.html

2. 配置sass/scss/less/stylus样式转译

以Sass/SCSS为例:

安装依赖

yarn add --dev node-sass sass-loader

编写样式

src/index.scss

h1 {
    color: red;
}

应用样式

src/index.jsx

import React from 'react'
import ReactDOM from 'react'
import App from './App'

import './index.scss'

ReactDOM.render(<App />, document.querySelector('#app'))

完成后, 用前述命令启动开发服务器, 效果如下:

效果

less/stylus配置同理, 但是依赖有所不同

样式语言 扩展名 依赖
LESS .less less less-loader
Stylus .styl .stylus stylus stylus-loader

3. CSS Modules

相信不少开发者应该听说过CSS Modules的大名. CSS Modules是CSS命名冲突的一个解决方案. Poi内置了对CSS Modules的支持, 并且开箱即用. 下面让我们尝试一下使用CSS Modules来为我们的网页添加一个蓝字红底的标题.

编写样式

src/App.module.css

.title {
  color: blue;
  background-color: palevioletred;
}

应用样式

src/App.jsx

import React from 'react'

import styles from './App.module.css'

function App() {
    return (
        <div className="app">
            <h1>Poi + React</h1>
            <h1 className={styles.title}>Blue Title with Pale Violet Red Background</h1>
        </div>
    )
}

export default App

完成后, 启动开发服务器, 效果如下:

效果

配置转译

CSS Modules同样也可以使用Sass/SCSS/LESS/Stylus等需要转译的语言, 无需太多配置, 只要将后缀名改为对应的语言, 然后按照上文所述安装依赖即可.

4. 向下兼容老旧浏览器

Poi会自动使用Babel在打包时对源码进行转译. 通常情况下, 它默认进行的转译已经够用 (关于Poi到底做了什么, 请参见它的文档和它的Babel Preset源码).

注意: Poi不会为你的代码自动加上任何polyfill (在文档中有提及). 如果需要, 请自行添加polyfill (如: core-js)

当然, 有时你想对它生成的代码目标做跟精细的控制, 那么你需要在package.json中配置browserslist来生成针对指定浏览器的代码.

例子

比如说你要生成较为现代化的代码 (这么做可以减少生成的代码量), 那么你可以这么配置:

package.json

"browserslist": [
    "> 1%",
    "not op_mini all",
    "not ie 11"
]

如果你想预览一下这么配置的目标的话, 全局安装browserslist:

npm i -g browserslist

然后在命令行里执行browserslist查看结果. 如果你按照上文配置的话, 输出应该如下 (数据时间: 2020-02-24):

and_chr 79
and_uc 12.12
chrome 79
chrome 78
edge 18
firefox 71
ios_saf 13.3
ios_saf 13.2
ios_saf 13.0-13.1
ios_saf 12.2-12.4
safari 13
samsung 10.1

更多browserslist的用法请参见文档.

写在最后

Poi虽然是一个零配置打包器, 但是由于它基于Webpack构建, 它的可配置性是非常强的. 有兴趣的朋友可以去研究文档, 我也有可能会写一篇关于Poi的配置指南. 这是我第一次写掘金专栏, 如有任何不严谨之处, 请在评论区提出.

avatar
文章
阅读
粉丝