前端项目搭建

时间 2019-12-12

标签前端项目搭建繁體版

原文原文链接

文件说明

build　里面是一些操做文件，使用npm run * 时其实执行的就是这里的文件css

config 配置文件，执行文件须要的配置信息html

src　资源文件，全部组件以及所用的图片前端

assets 资源文件夹，放图片之类的资源
components 组件文件夹，写的全部组件都放在这个文件夹下
router 路由文件夹，这个决定了也面的跳转规则
App.vue应用组件，全部本身写的组件，都是在这个组件之上运行了
main.js webpack入口文件
webpack四大特性entry入口、output输出，loader加载器，plugins插件

node_modules　　　　　文件夹，这里放的就是全部依赖的模块vue

static 　　　　　　　　　用来放没有npm包的第三方插件，字体文件node

package.json　　　　　　配置信息模块webpack

index.js　　　　　　　　入口文件git

./src/main.js 　　　　　　入口

entry point　　　　　　入口点.github

npm init　　　　　　初始化，建立package.jsonweb

npm install　　　　将package.json模块安装到node-modules文件职工shell

npm run 　　　　　　执行配置在package.json中的脚本

npm run build 　　　　　打包

PostCSS

是一款使用插件去转换CSS的工具，有许多很是好用的插件，例如autoprefixer,cssnext以及CSS Modules。

Autoprefixer是一个根据can i use解析css而且为其添加浏览器厂商前缀的PostCSS插件。

Babel

babel

下一代JavaScript 语法的编译器它可让你放心使用大部分的JavaScript的新的标准的方法，而后编译成兼容绝大多数的主流浏览器的代码。在项目工程脚手架中，通常会使用.babelrc文件，经过配置一些参数配合webpack进行打包压缩。

环境搭建

初始化

进入项目目录，而后命令行运行 npm init ，按照提示进行初始化便可。提示中的信息，能写的都写上，别随意忽略了。初始化完成以后，项目根目录下会有 package.json 的文件。

规范版本号

打开 package.json 文件，将版本号定义为 "version": "0.0.1" 。之后咱们每次正式提交代码，版本号都不同。版本号分三级，分别为：

一级，重构版本
二级，重大功能改进
三级，小升级或者 bug 修复

为什么从 0.0.1 开始？由于 0.x.x 能够认为是非正式版本、测试版，而从 1.x.x 开始，就是正式发布的版本了。

规范一级目录

项目的一级目录要提早规范好，最起码一些经常使用的目录要提早订好留用，不能乱来。例如：

src - 源代码
release - 发布结果
test - 单元测试用例
doc - 文档
example - 示例

构建工具

这部分比较独立，内容也比较多，就不详细讲了，用最经常使用的 webpack 作一个简单演示吧。

安装插件 npm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest webpack webpack-cli --save-dev --registry=https://registry.npm.taobao.org

。

https://npm.taobao.org/

项目根目录下建立 .babelrc 文件，内容如

{ "presets": ["es2015", "latest"], "plugins": [] }

项目根目录下建立 webpack.config.js 文件，内容如

module.exports = { entry: './src/index.js', output: { path: __dirname, filename: './release/bundle.js' }, module: { rules: [{ test: /\.js?$/, exclude: /(node_modules)/, loader: 'babel-loader' }] } }

最后，修改 package.json 中的 scripts ，增长 "release": "webpack" 。而后命令行运行 npm run release ，就可生成 release 的内容。

运行示例

release 的内容已经发布出来了，还要运行起来，最简单的方式，在example建立test.html，而后引用 release 的内容。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>example</title> </head> <body> <p>example</p> <script src="../release/bundle.js"></script> </body> </html>

为什么规范化运行，能够修改 package.json 中的 scripts ，增长 "example": "http-server -p 8880" 。而后命令行运行 npm run example ，浏览器访问 http://localhost:8880/example/test.html 。

规范 git 分支

至少要存在两个分支，master 和 dev ， dev 是开发中的代码。固然，你能够规范更多的分支，例如 next fix-bug 等，可是注意一个原则 —— 用不到的就先不要规划。

完善 `README.md`

README.md 是开源项目的一张脸，用户的第一印象。必须包含如下内容：

产品简介（此处要突出特色，打差别化竞争）
产品安装和下载
快速使用（详细的使用文档或者二次开发文档，外链便可）
交流提问区
关于做者（放你的博客连接，和收款二维码）

最后，把以上完成的工做，都提交到 github 中。

提交代码

写代码

具体写什么代码不是本文的重点，你尽情的根据本身的项目来写本身的代码就是了。记得必定要使用编码规范的工具，例如 es-lint 等，不然通过长时间的维护，必然留坑。

写文档 & 写测试用例

注意，文档和测试用例对于一个开源产品来讲很是重要！很是重要！很是重要！并且，文档和测试用例自己就是代码不可分割的一部分。

如何写测试用例，须要用到其余工具，内容也相对独立，这里就不介绍了，本身去查一查吧。再次强调，测试用例很重要！！！

在写文档以前，还须要准备其余的工具。定位到项目目录下，npm i gitbook-cli -g 安装 gitbook ，而后建立 SUMMARY.md ，内容以下：

# Summary * [项目介绍](README.md) * [使用文档](doc/use/README.md) * [使用1](doc/use/use1.md) * [使用2](doc/use/use2.md) * [二次开发](doc/dev/README.md) * [开发1](doc/dev/dev1.md) * [开发2](doc/dev/dev2.md)

其实一看这个文件内容就知道，这是一个文档的目录，你能够根据本身项目的须要从新定义这个目录。须要注意的是，第一行 * [项目介绍](README.md) 对应的是已经存在的 README.md 文件。

运行 gitbook init ，会看到各个文件都被建立了，就能够完善各个文档的内容。内容完成以后，运行 gitbook build 能够将 md 文件发布为 html 文件，默认放在 _book 文件夹。启动了 npm run example 以后，能够访问 http://127.0.0.1:8880/_book/ 查看效果。

最后，再次修改一下 README.md ，把文档的连接加上

[如何使用](./doc/use/README.md) [二次开发](./doc/dev/README.md)

提交初版代码

首先，修改一下 .gitignore 文件，加上一行 _book ，把打包出来的文件忽略掉。而后用以前的方式提交到 github 的 master 分支，这里再也不赘述了。

接下来，建立 tag 并提交，代码以下：

git tag -a 'v0.0.1' -m 'first commit' git push origin v0.0.1

提交以后，下载地址就有了， https://github.com/fast-cache/fast-cache/releases 这里能够下载到各个版本的源码。

最后要提交到 npm 上，能让使用者经过 npm 进行安装。首先，运行 npm add user 和 npm login 来登陆，根据提示将你以前注册 npm 时的帐号、密码、邮箱写上就好了，问题不大。而后，在项目的根目录运行 npm publish . ，此时问题来了！！！

运行以后报了 403 错误，刚才明明登陆成功了，不可能有权限问题呀。后来一查才知道，原来 fast-cache 在 npm 中和其余项目重名了！！！没办法，只能更名，将 package.json 中的名称改成 fast-cache-npm ，而后再发布就成功了。

发布以后，经过 https://www.npmjs.com/package/fast-cache-npm 就能够访问 npm 项目主页了。

注意，为项目取名时，必定要提早把名字在 github 和 npm 搜索一下，确认没有重名才行！！！

升级代码并提交

上述是第一次提交代码的流程，下面简述一下升级代码以后的提交流程。在代码开发阶段的步骤总结以下：

来一个 dev 分支，不要在 master 分支开发
修改 package.json 版本号，按照以前既定的版本规则修改，不能乱改
修改代码、文档和测试用例
自测
将 dev 分支提交到远程

代码开发完成以后，提交的流程以下：

再次确认版本号，由于版本号很是重要
将 dev 合并到 master ，并提交 master 到远程
建立 tag 并提交到远程
提交到 npm

合并 pr

pr 即 Pull Request 的简称。

开源软件最大的特点就是容许全世界的开发者都能为其贡献代码，你这个开源项目也不例外。其余人颇有可能会经过 github 的 pr 为你的项目贡献本身的代码，到时候你既得欣然接受，又不能茫然接受。

其余人贡献的 pr 能够经过 https://github.com/fast-cache/fast-cache/pulls 连接看到。对于每个 pr ，若是你想合并，直接 merge 就行了（合并完以后，本地代码要随时更新一下）；若是你不想合并，留言说明而后关闭掉便可。

建立官网

咱们经过 github pages 的机制便可免费建立项目的挂网，不用花一分钱。

建立项目

登陆 github ，建立一个名为 fast-cache.github.io 的项目，名字必须是这一个！！！而后下载到本地，即 git clone xxxx 。而后，进入项目目录，新建一个 index.html ，而后随便写点什么，例如 <h1>hello world</h1> ，提交到 github 远程。

最后，访问 fast-cache.github.io ，你就能看到刚才的内容了，最简单的官网就这么出来了。作到这里，你应该知道 github pages 就是一个静态页面的服务器，上传相应的 html 就能显示。

生成官网

此前用 gitbook 将文档生成为 html 了，应该还记得。那么咱们如今从新运行 gitbook build 生成 html ，而后将全部的 html 拷贝到这里来，所有提交上去，正式的官网也就出来了。

更新 `README.md`

记得要修改 README.md ，把官网的地址加进去。


做者：双越
连接：https://www.imooc.com/article/28240
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合做

.postcssrc.js