从0到1 - Githubissues

xuliuzhu1834 commented 7 years ago

写这篇文章的目的，是想记录下最近这个项目搭建起来的具体流程，梳理一下最近的技术栈，也方便看到这篇文章的菜鸟们能够快速搭建一个前端项目。

关于选择前端框架

由于@renaesop 带领的小组已经选定了React前端体系，所以我们就决定是React了，是不是有种被钦定的感觉？

实际上由于是新项目，领导给我们的自由度也很高。我们完全可以选择 Vue 或者 Angular 等其它框架，

但是想跟@renaesop大神的脚步学习新东西，所以还是放弃这个幼稚的想法，毕竟如果踩到自己又解决不了坑，那就尴尬了。

为什么使用React

我觉得@renaesop之所以选用React肯定有他自己的道理，但是我想就我自己的观点浅显的说一下原因

React可以说是前端这几年技术爆发的代表，它的技术体系已经成熟。在国内，React的社区发展迅速，并且已经壮大，对问题的快速解决有很大的帮助，我们团队之前在做商城的时候一直使用的是Jquery为代表的·祖传技术·，因为团队所有人都有一定的基础，对于技术思维上的改变反而比新手需要更多的磨炼，可以说React是我们团队从旧技术向新技术转型的最好的基石。
我们开始做的是内部应用系统，业务逻辑更加深度，但是数据量明显不需要那么大。大家都知道React的核心技术之一就是 Virtual DOM，Angular、Vue是MVVM系的。MVVM的更新变化是基于数据层面的，而React确实基于DOM结构层面的，也就是说，数据上有一点点的小变动，Angular都会启动watcher来进行更新，而React 即使是完全不一样的数据，只要最后渲染结果没变，那么就不需要做无用的动作。这样React的重绘相对于MVVM系框架就会快不少，在内部系统中，由于不少工作人员都会对某些功能重复性操作，自然操作会比较娴熟，前端加载速度快对他们来说是提高工作效率的保证。
React本身并没有什么上手难度，主要还是思维上的转变，况且加上 ant-design 的组件库，更加省了不少时间。

总之好处一大堆，坏处也有，比如在数据递归更新的时候，React会显得力不从心？（这么说对吗？）

Ready!

好吧，不啰嗦了，我们言归正传。

- 编辑器:

不过工欲善其事，必先利其器。编辑器我们选用了WebStorm,不过这是一款收费软件，其它的vscode和eclipse也是可以做到的，不过我觉得没WebStorm好用就是了。

- 编码环境安装：

保证你的系统安装了 node.js 和 npm,至于安装教程我就不会再多做赘述，百度一大堆。

创建你的项目文件，这里我们创建了一个名为 ZeroToOne的文件夹，然后打开控制台到该项目路下输入npm init，下面就是按照你的需要输入了，这里我们起个名字一路回车就好，不过开发环境中一定要写好自己的信息。

npminit

这时候你的项目中会出现package.json的文件，这个文件是定义包属性的，当你更新依赖包后，此文件中的属性也会相应更改，有了这个之后，团队中任何人只要把项目拿到手，然后在控制台执行npm install操作就可以将所有依赖包自动下载。

我们首先利用npm将React加入我们的项目依赖包中，执行下面的命令：

npm install --save react react-dom

使用React必须得用个转换工具，此时Babel是最合适的选择，Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。我们将使用es6编写，所以配置如下：

{ "presets": ["es2015", "react"], "plugins": [ "transform-decorators-legacy" ] }

然后安装Babel的各种依赖:

npm install --save-dev babel-core babel-loader babel-plugin-import babel-plugin-transform-decorators-legacy babel-polyfill babel-preset-es2015 babel-preset-es2015-react-no-gen babel-preset-react

当然这里按需安装。

我们在编写JS时，难免会有些小纰漏，如何自动化的解决这样的问题呢，那就是引入eslint，它可以帮助你检查你平常不在意的语法问题，配置好的话，甚至可以改善并统一团队编码规范，而我们也随大流，选择了airbnb的编码风格。

和babel类似，eslint的配置文件是.eslintrc，简单的配置如下： { "extends": "airbnb", "parser": "babel-eslint"， "env": { "browser": true }, "globals": { "process": true } }

安装依赖包:

npm install --save-dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react babel-eslint

仍然是按需安装

如果你使用的是WebStorm，那么安装结束后，你可以在设置中启用eslint，这样你在编码时就会有提示啦，非常方便。

最后，我们要讲代码打包构建，我想大家对这块早就又所耳闻，前端工程化 就是因为有了这些构建工具而火爆异常。大名鼎鼎的Gulp.js是这块的大佬，而我们这次要用的是更为新兴的构建工具 -- webpack(现在已经不新了 )

不可避免的是，我们需要写个webpack的配置文件，不过这次的名字不需要限制，但是它默认是webpack.config.js,我们先下载一下它

npm install --save-dev webpack

我们对css也需要实现构建所以我们还缺少css loader，下载两个loader：

npm install --save-dev style-loader css-loader

对webpack.config.js进行简单配置如下：

module.exports = { entry: { app: ['./src/entry.jsx'],//入口文件 }, output: { path: 'dist', filename: '[name].bundle.js', }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'], }, { test: /\.css/, loaders: ['style', 'css'], }, ], }, plugins: [], };

为了方便构建，我们在packge.json中的script属性中加入:

"build": "webpack"

开始写代码吧

由于我们在webpack.config.js中配置了入口文件为./src/entry.jsx,所以我们在跟目录下创建src文件夹，并在文件夹下创建entry.jsx,必然的，我们还需要在根目录下创建一个index.html。

index.html:

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ZeroToOne</title>
    </head>
    <body>
       <div id='container'>

       </div>
        <script src="dist/app.bundle.js"></script>
    </body>
    </html>

entry.jsx:

    import React from 'react';
    import { render } from 'react-dom';

    render(
      <h1>
        Hello world
      </h1>, document.getElementById('container')
    );

最后控制太执行

npm run-script build

控制台执行结束后，浏览器打开index.html 是不是出现·Hello world·了呢？