tags: [组件]
categories: 前端工程化

脚手架功能需求

• 代码检测
• 文档工具
• 规范的项目组织结构
• ES 规范与浏览器兼容性不一致
• CSS 弱编程能力
• 资源定位
• 图片压缩|base64 内嵌| CSS Sprites
• 模块依赖分析和压缩打包
• 自动化工具，提高效率
• 数据 mock 服务层封装
• 路由配置
• react-devtool 配置
• 数据状态管理配置选型（redux|mobix)
• 性能提升？(immutable)

推荐工具

lerna

管理前端 multiple packages 项目的工具

• 官网

• lerna 入门指南

• monorepo 新浪潮 | introduce lerna

• 使用lerna优雅地管理多个package - 知乎

文档工具

• storybook：通过 JS(JSX) 文件写 examples

• React Styleguidist：通过 Markdown 文件写 examples

• docz: markdown 与 react 的结合，十分方便的工具

• docsite: 快速搭建静态站点，对国际化支持很好

• docsify官方网站

• ydoc

• ydoc-plugin-vue-styleguide

• Vue Styleguidist

• noox: The best template engine for JavaScript, base on React Jsx

• VuePress官方文档

• MkDocs 中文文档

推荐 npm 包

• new-component：自动初始化React组件所需的初始化代码

环境准备

Node | npm | git

Yeoman

安装

npm install -g yo # 安装 Yeoman
yo --version
npm install -g generator-fountain-webapp # 安装 Yeoman 生成器，目前可用的生成器超过了 3500 个
yo  # 选择 Install a generator 来搜索发布的生成器

使用生成器搭建我们的app

mkdir mytodo && cd mytodo
yo # 选中 Fountain Webapp，按回车 enter 运行生成器

FountainJS 生成器提供一些选项来匹配你的喜好:

• 框架（React，Angular2，Angular1）

• 模块管理工具（Webpack，SystemJS，none with bower）

• JavaScript预处理器（babel，TypeScript，none）

• css 预处理器（Sass，Less，none）

• 三个模板app（a landing page，hello world，TodoMVC）

生成器生成的目录结构

• src： web应用的父目录

• conf：配置文件及第三方工具的父目录（Bowersync，Webpack，Gulp，karma）

  • Bowersync: 会监测你的文件的变化然后自动加载(通过配置 gulpfile.js 中的 gulp tasks 以及 gulp_tasks/browsersync.js 中的 Browsersync 实现)

• gulp_tasks 和 gulpfile.js：构建任务

• .babelrc，package.json，node_modules：配置以及所需依赖包

• .gitattributes 和 .gitignore：git的配置

资源及工具

在线 webpack 配置：https://createapp.dev/webpack