从零配置一个前端项目

九月 27, 2018

工作中需要我优化项目，所以有必要按项目结构从头撸一遍。不然根本不了解细节。

配置package.json

前端项目必备，不需要单独配置，但是也应该初始化一下。

npm init

然后根据提示一路确定就行。

良好的项目应该有个readme文档。告诉使用的人，怎么把项目跑起来，因为不一定所有的项目都是npm run dev、npm run build。而且放到github上，别人第一眼看见的就是readme

作用是在编辑代码的时候就保证项目中每个程序员的格式都一致。避免风格不一致，修改别人代码不小心格式化的问题。

配置方法很简单，这个功能是由浏览器插件实现。

工程化的时候，应该上传该配置文件且保证每个开发者都安装了对应插件。配置也非常简单。

功能就不用说了，editorconfig只能保证风格，eslint更强大，可以高亮错误、自动格式化错误代码等。配置也非常多。

但是eslint是被动修改，是编辑之后再纠错。所以editorconfig也是有必要的

1	npm install eslint --save-dev

1	./node_modules/.bin/eslint --init

根据提示走完配置即可在项目根目录下创建一份eslint配置文件。可以给配置文件添加配置内容以达到目的

VSCode的插件就叫Eslint

在设置中添加

1	"eslint.enable": true

在根目录下新建文件：.eslintignore。eslint则不会去检查指定的文件。语法同.gitignore。但是不同的是，eslintignore默认禁止/node_modules/* 和 /bower_components/*

在工程化的时候，应该把eslint的配置文件上传到项目中，并且确保每个人都安装了编辑器eslint插件

初始化git项目

git init

关联github

git remote add origin git@github.com:HelloWorld20/webpack-demo.git

添加不想被git版本控制的文件和文件夹，语法参考.gitignore语法参考

搞到一半就不搞了。一般直接用Vue-cli来创建就好。

只记得需要一个mocha-webpack的东西

是个大头，另起一篇文章记录

查看评论