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

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的配置指南. 这是我第一次写掘金专栏, 若有任何不严谨之处, 请在评论区提出.