第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定

React v16 與 Webpack v4 的多特性模板項目

img

题注:欢迎加入阿里南京前端团队,欢迎关注阿里南京技术专刊了解更多讯息。

React & Webpack Boilerplate V4

React & Webpack Boilerplate V4 是笔者前端常用模板集锦项目 fe-boilerplate 的一部分,尽可能地使用无异议的工具,提供直观且简洁明了的方式;相较于 create-react-app,具有更好的可配置性与适应性,适合于中长期项目。支持最新的 Webpack 4 & React 16.3 版本,如果需要引入 TypeScript 支持,可以借鉴 react/webpack-ts 这个模板。

为了保证项目的纯粹性,将原本 React Router,Redux,MobX 等常见的技术框架的使用迁移到了 fe-boilerplate 的其他模板项目中。也可以查阅 Webpack CheatSheet,或者 React CheatSheet现代 Web 开发基础与工程实践 了解更多 Web 开发实践的知识。

配置与使用

下载或者克隆 fe-boilerplate,并且进入 react/webpack 子目录:

# 安装依赖
$ cnpm install

# 仅启动 Web 开发服务器
$ npm run dev

# 启动 Web 开发服务器与 Mock 服务器
$ npm start

# 启动 Storybook 服务,在进行组件开发时使用
$ npm run storybook

# 编译为可发布的包体
$ npm run build

# 使用 *.umd.* 配置文件,编译为库
$ npm run build:lib

# 执行 ESLint
$ npm run lint

# 执行包体分析
$ npm run analyze

如果我们是进行的多页面应用开发,那么可以在 webpack.config.base.js 文件中添加更多的 Entry 与 HtmlWebpackPlugin 配置。

技术栈
  • 样式
    • 支持使用 CSS Modules/SCSS/Less 等 CSS 模块化解决方案,对于潜在的类名过长导致的冗余包体等问题可以参考 babel-plugin-jsx-nested-classname
    • 示例代码使用了 styled-components 作为 CSS-in-JS 库。
    • 使用 PostCSS 作为 CSS 代码的后置 Polyfill 以及语法转换支持,详见 postcss.config.js 中的配置。
  • 约束

    • 使用 Prettier 作为代码格式化工具。
    • 强烈建议使用 ESLint 进行代码风格控制,可以使用 vscode-eslint 插件以获得更好的开发体验;ESLint 规则推荐使用 eslint-config-airbnb
    • 可以使用 vscode-import-formatter 等格式化工具处理代码的细节风格,譬如引用顺序等问题。
  • 测试
    • 使用 Jest 作为 Test Runner 以及单元测试框架。
    • 使用 Enzyme 作为 React 组件的测试框架。
  • 计算
开发态特性
  • 热加载
  • 构建优化
    • 使用 DllPlugin 作为开发环境下公共代码提取工具以优化编译速度生产环境。
    • 可以考虑使用 HappyPack, parallel-webpack 等工具提升 Webpack 的并行处理能力。
发布态特性
  • 代码分割,Webpack 4 移除了 CommonChunksPlugin,替换以 optimization 与 splitChunks 配置项,详细配置参考 webpack.config.prod.js
  • PWA 特性,使用 offline-plugin 添加便捷的 PWA 支持。
  • 服务端渲染,详见 ssr/server
  • 代码优化,使用 Prepack & prepack-webpack-plugin 进行代码优化。
點擊查看更多內(nèi)容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊有機(jī)會得

100積分直接送

付費專欄免費學(xué)

大額優(yōu)惠券免費領(lǐng)

立即參與 放棄機(jī)會
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消