React成长日记--从零开始

从零开始是一部极其冗长的小说,从开始到完本历时N年之久

公司的产品功能很丰富,但是缺少一个专门的后台管理系统,现在运营在管理的时候使用的是客户相同的后台,不仅看起来不美观,而且使用起来也不方便,有诸多报表之类的数据不能直观展现,因此我打算自己完成一个后台系统,预计会是一个巨大的坑,但我已经做好了准备,加油!

  • 目标技术栈:Babel+React+Antd
第一步 建立项目

我是用的编辑器是HBuilder,自从两年前好友推荐后就留下深刻印象,期间换了不少编辑器,但是换来换去最后又换回了HBuilder。
新建一个文件夹,就叫 ** ManagerCenter ** 吧

Paste_Image.png

使用npm创建项目

npm init

这里要注意,npm的项目名不可以是大写字母,因此驼峰的写法在这里不能用,只能用 - 分隔了,为了省事一路 Enter 点下去,如上,一个新项目就建好了,项目根目录下会出现一个package.json文件夹,此文件夹中包含了该项目的信息:

{
  "name": "manager-center",
  "version": "1.0.0",
  "main": "js/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "lirq",
  "license": "ISC",
  "description": ""
}

接下来我们要安装该项目所需的包,由于我打算在这个项目中使用ES2015的语法,因此我们先从安装Babel开始:

npm install babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev

还要安装各种加载器:

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

接下来安装最重要的部分

npm install react react-dom --save-dev

到此,此项目需要依赖的包就安装的差不多了,接下来介绍webpack的使用,即webpack.config.js的配置。(我也是摸着石头过河,欢迎拍砖指正):D
在根目录下建立webpack.config.js文件:

Paste_Image.png

下面开始进入不正经模式......

先说Babel的配置:

由于Babel6的使用方式和Babel5完全不同,而且我也没怎么使用过Babel5,因此在这就不啰嗦了,直说Babel6。在webpack.config.js中写如下代码:

module.export={}

额额额额,还是从头开始说webpack.config.js吧
恩,进入正题:
根据我的研究,webpack.config.js由以下几个部分组成:

  • entry
  • output
  • module
  • plugins
    entry 代表入口文件,具体什么是入口文件,就是webpack要把这个文件经过一番处理后输出,项目使用时要调用的,还可以输入公共包,可以引入多个文件
    output 代表输出文件,由pathfilename,和**publicPath
    **组成,分别表文件路径,文件名称和CDN之类的域名,这个文件名里边还有别的属性,放到后面说
    module 我目前使用过的module的内容就是设置加载器loader
    plugins 配置插件的地方,常用的有CommonsChunkPlugin

嗷,困了,我先睡一觉,明天接着来

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容