1. 选择现成的项目模板还是自己搭建项目骨架
搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。
选择一个现成项目模板是搭建一个项目最快的方式，模板已经把基本的骨架都搭建好了，你只需要向里面填充具体的业务代码，就可以通过内置的工具与命令构建代码、部署到服务器等。
一般来说，一个现成的项目模板会预定义一定的目录结构、书写方式，在编写项目代码时需要遵循相应的规范；也会内置必要的工具，比如 .editorconfig、eslint、stylelint、prettier、husky、lint-staged 等；也会内置必要的命令（package.json | scripts），比如 本地开发：npm run dev、本地预览：npm run start、构建：npm run build、部署：npm run deploy 等。
github上比较好的项目模板：
这些模板的使用又分为两种：使用 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 <span class="hljs-tag"><<span class="hljs-name">你的项目名字</span>></span>
复制代码
一般来说，接下来运行 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 功能。
参考：
3. 选择合适的构建工具
对于前端项目来说，构建工具一般都选用 webpack，webpack 提供了强大的功能和配置化运行。如果你不喜欢
