从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

1. 选择现成的项目模板还是自己搭建项目骨架

搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。

选择一个现成项目模板是搭建一个项目最快的方式，模板已经把基本的骨架都搭建好了，你只需要向里面填充具体的业务代码，就可以通过内置的工具与命令构建代码、部署到服务器等。

一般来说，一个现成的项目模板会预定义一定的目录结构、书写方式，在编写项目代码时需要遵循相应的规范；也会内置必要的工具，比如 .editorconfig、eslint、stylelint、prettier、husky、lint-staged 等；也会内置必要的命令（package.JSON | scripts），比如 本地开发：npm run dev、本地预览：npm run start、构建：npm run build、部署：npm run deploy 等。

社区比较好的项目模板：

• react-boilerplate
• ant-design-pro
• vue-element-admin
• react-starter-kit
• create-react-app
• create-lila-app（我自己用的，哈哈）

这些模板的使用又分为两种：使用 gIT 直接克隆到本地、使用命令行创建。

（使用现有模板构建的项目，可以跳过第 2 ～ 7 步）

1.1 使用 git 直接克隆到本地

这是一种真正意义上的模板，可以直接到模板项目的 github 主页，就能看到整个骨架，比如 react-boilerplate、ant-design-pro、vue-element-admin、react-starter-kit。

以 react-boilerplate 为例：

克隆到本地：

git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git <你的项目名字>

切换到目录下：

cd @H_406_87@<你的项目名字>

一般来说，接下来运行 npm run install 安装项目的依赖后，就可以运行；有些模板可能有内置的初始化命令，比如 react-boilerplate：

npm run SETUP

启动应用：

npm start

这时，就可以在浏览器中预览应用了。

1.2 使用命令行创建

这种方式需要安装相应的命令，然后由命令来创建项目。

以 create-react-app 为例：

安装命令：

npm install -g create-react-app

创建项目：

create-react-app my-app

运行应用：

cd my-app
npm start

1.3 自己搭建项目骨架

如果你需要定制化，可以选择自己搭建项目的骨架，但这需要开发者对构建工具如 webpack、npm、node 及其生态等有相当的了解与应用，才能完美的把控整个项目。

下面将会一步一步的说明如何搭建一个定制化的项目骨架。

2. 选择合适的规范来写代码

js 模块化的发展大致有这样一个过程 iife => commonjs/amd => es6，而在这几个规范中：

• iife: js 原生支持，但一般不会直接使用这种规范写代码
• amd: requirejs 定义的加载规范，但随着构建工具的出现，便一般不会用这种规范写代码
• commonjs: node 的模块加载规范，一般会用这种规范写 node 程序
• es6: ECMAScript2015 定义的模块加载规范，需要转码后浏览器才能运行

这里推荐使用 es6 的模块化规范来写代码，然后用工具转换成 es5 的代码，并且 es6 的代码可以使用 Tree shaking 功能。

参考：

• IIFE(Immediately-invoked function expression)
• Tree shaking
• webpack - tree-shaking
• webpack 如何优雅的使用tree-shaking（摇树优化）

3. 选择合适的构建工具

对于前端项目来说，构建工具一般都选用 webpack，webpack 提供了强大的功能和配置化运行。如果你不喜欢复杂的配置，可以尝试 parcel。

参考：

• webpack 之外的另一种选择：parcel

4. 确定是单页面应用（SPA）还是多页面应用

因为单页面应用与多页面应用在构建的方式上有很大的不同，所以需要从项目一开始就确定，使用哪种模式来构建项目。

4.1 多页面应用

传统多页面是由后端控制一个 url 对应一个 htML 文件，页面之间的跳转需要根据后端给出的 url 跳转到新的 html 上。比如：

http://www.example.com/page1 -> path/to/page1.html
http://www.example.com/page2 -> path/to/page2.html
http://www.example.com/page3 -> path/to/page3.html

这种方式的应用，项目里会有多个入口文件，搭建项目的时候就需要对这种多入口模式进行封装。另外，也可以选择一些封装的多入口构建工具，如 lila。

4.2 单页面应用

单页面应用（single page application），就是只有一个页面的应用，页面的刷新和内部子页面的跳转完全由 js 来控制。

一般单页面应用都有以下几个特点：

• 本地路由，由 js 定义路由、根据路由渲染页面、控制页面的跳转
• 所有文件只会加载一次，最大限度重用文件，并且极大提升加载速度
• 按需加载，只有真正使用到页面的时候，才加载相应的文件

这种方式的应用，项目里只有一个入口文件，便无需封装。

参考：

• 单页面应用（SPA）、按需加载

5. 选择合适的前端框架与 UI 库

一般在搭建项目的时候就需要定下前端框架与 UI 库，因为如果后期想更换前端框架和 UI 库，代价是很大的。

比较现代化的前端框架：

• react
• vue
• angular

一些不错的组合：

• jquery + bootstrap：比较经典的
• react + ant-design、material-ui、Semantic-UI：react 的组合
• vue + element、iview、vux、mint-ui：vue 的组合

参考：

• 前端最受欢迎的 UI 框架

6. 定好目录结构

一个好的目录结构对一个好的项目而言是非常必要的。

一个好的目录结构应当具有以下的一些特点：

1. 解耦：代码尽量去耦合，这样代码逻辑清晰，也容易扩展
2. 分块：按照功能对代码进行分块、分组，并能快捷的添加分块、分组
3. 编辑器友好：需要更新功能时，可以很快的定位到相关文件，并且这些文件应该是很靠近的，而不至于到处找文件

比较推荐的目录结构：

多页面应用

|-- src/ 源代码目录

    |-- page1/ page1 页面的工作空间（与这个页面相关的文件都放在这个目录下）
        |-- index.html html 入口文件
        |-- index.js js 入口文件
        |-- index.(css|less|scss) 样式入口文件
        |-- html/ html 片段目录
        |-- (css|less|scss)/ 样式文件目录
        |-- mock/ 本地 json 数据模拟
        |-- images/ 图片文件目录
        |-- components/ 组件目录（如果基于 react, vue 等组件化框架）
        |-- ...
        
    |-- sub-dir/ 子目录
        |-- page2/ page2 页面的工作空间（内部结构参考 page1）
            |-- ...
        
    |-- ...
    
|-- html/ 公共 html 片段
|-- less/ 公共 less 目录
|-- components/ 公共组件目录
|-- images/ 公共图片目录
|-- mock/ 公共 api-mock 文件目录
|-- ...

单页面应用

|-- src/ 源代码目录
    |-- page1/ page1 页面的工作空间
        |-- index.js 入口文件
        |-- services/ service 目录
        |-- models/ model 目录
        |-- mock/ 本地 json 数据模拟
        |-- images/ 图片文件目录
        |-- components/ 组件目录（如果基于 react, vue 等组件化框架）
        |-- ...
        
    |-- module1/ 子目录
        |-- page2/ page2 页面的工作空间（内部结构参考 page1）
        
    |-- ...
    
|-- images/ 公共图片目录
|-- mock/ 公共 api-mock 文件目录
|-- components/ 公共组件目录   
|-- ... 

参考：

• 目录结构优化

7. 搭建一个好的脚手架

搭建一个好的脚手架，能够更好的编写代码、构建项目等。

可以查看 搭建自己的前端脚手架 了解一些基本的脚手架文件与工具。

比如：

|-- /                              项目根目录
    |-- src/                       源代码目录
    |-- package.json               npm 项目文件
    |-- README.md                  项目说明文件
    |-- CHANGELOG.md               版本更新记录
    |-- .gitignore                 git 忽略配置文件
    |-- .editorconfig              编辑器配置文件
    |-- .npmrc                     npm 配置文件
    |-- .npmignore                 npm 忽略配置文件
    |-- .eslintrc                  eslint 配置文件
    |-- .eslintignore              eslint 忽略配置文件
    |-- .stylelintrc               stylelint 配置文件
    |-- .stylelintignore           stylelint 忽略配置文件
    |-- .PRettierrc                prettier 配置文件
    |-- .prettierignore            prettier 忽略配置文件
    
    |-- .babelrc                   babel 配置文件
    |-- webpack.config.js          webpack 配置文件
    |-- rollup.config.js           rollup 配置文件
    |-- gulpfile.js                gulp 配置文件
    
    |-- test/                      测试目录
    |-- docs/                      文档目录
    |-- jest.config.js             jest 配置文件
    |-- .gitattributes             git 属性配置

• .editorconfig: 用这个文件来统一不同编辑器的一些配置，比如 tab 转 2 个空格、自动插入空尾行、去掉行尾的空格等，http://editorconfig.org
• eslint、stylelint、prettier: 规范化代码风格、优化代码格式等
• husky、lint-staged: 在 git 提交之前对代码进行审查，否则不予提交
• .gitlab-ci.yml: gitlab ci 持续集成服务

参考：

• 搭建自己的前端脚手架
• 怎样提升代码质量
• CSS 模块化
• css 的弱化与 js 的强化
• 本地化接口模拟、前后端并行开发

=================================================

到这里为止，一个基本的项目骨架就算搭建好了。

8. 使用版本控制系统管理源代码（git）

项目搭建好后，需要一个版本控制系统来管理源代码。

比较常用的版本管理工具有 git、svn，现在一般都用 git。

一般开源的项目可以托管到 http://github.com，私人的项目可以托管到 https://gitee.com、https://coding.net/，而企业的项目则需要自建版本控制系统了。

自建版本控制系统主要有 gitlab、gogs、gitea：gitlab 是由商业驱动的，比较稳定，社区版是免费的，一般建议选用这个；gogs, gitea 是开源的项目，还不太稳定，期待进一步的更新。

所以，git + gitlab 是不错的配合。

9. 编写代码

编写代码时，js 选用 es6 的模块化规范来写（如果喜欢用 TypeScript，需要加上 ts-loader），样式可以用 less、scss、css 来写。

写 js 模块文件时，注释可以使用 jsdoc 的规范来写，如果配置相应的工具，可以将这些注释导出接口文档。

因为脚手架里有 husky、lint-staged 的配合，所以每次提交的代码都会进行代码审查与格式优化，如果不符合规范，则需要把不规范的代码进行修改，然后才能提交到代码仓库中。

比如 console.log(haha.hehe); 这段代码就会遇到错误，不予提交：

这个功能定义在 package.json 中：

{
  "devDependencies": {             工具依赖
    "babel-eslint": "^8.2.6",
    "eslint": "^4.19.1",
    "husky": "^0.14.3",
    "lint-staged": "^7.2.0",
    "prettier": "^1.14.0",
    "stylelint": "^9.3.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.0",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.10.0",
    "stylelint-config-prettier": "^3.3.0",
    "stylelint-config-standard": "^18.2.0"
  },
  "scripts": {                     可以添加更多命令
    "precommit": "npm run lint-staged",
    "prettier": "prettier --write "./**/*.{js
脚本宝典总结
       
以上是脚本宝典为你收集整理的jsx全部内容，希望文章能够帮你解决jsx所遇到的问题。
		
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。