zoukankan      html  css  js  c++  java
  • 从零开始的项目创建生活

    从零开始的项目创建生活

    一:搭建架子

    创建一个项目需要依赖很多文件,为了便于管理所以用nodejs里面的npm包来管理

    1、项目初始化
    &nbsp&nbsp&nbsp 使用命令npm init
    创建一个初始文件package.json,这个文件定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。

    2、项目依赖包的安装
    &nbsp&nbsp&nbsp 首先使用以下命令安装四个包
    npm install --save react react-dom babelify babel-preset-react

    以及为了使用es2015而安装的包
    npm install babel-preset-es2015

    为了使这些依赖包的信息能够在我们的package.json文件里显示,所以我们要加上 --save,当然如果你是mac或者linux用户为了避免权限问题,加上sudo。

    3、自动化工具webpack
    &nbsp&nbsp&nbsp 我们使用的很多模块是不能直接使用的,要经过一定的处理才能拿来用,而处理这些问题的依赖包实在是太多,很麻烦,所以webpack应运而生。
    &nbsp&nbsp&nbsp WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

    下面我们说一下怎么安装及使用webpack:

    a、首先全局安装webpack,输入命令sudo npm install -g webpack
    b、再装个nodejs的一个服务器,用于服务webpack的包,命令sudo npm install -g webpack-dev-server
    c、以上是在全局安装,所以我们在自己项目目录下去掉-g在安装一次,注意加上--save,以便记录在package.json里面
    d、安装完之后,建立一个webpack.config.js,然后配置一下里面的信息
    e、当在使用webpack时,可以直接使用webpack执行一次,就可以得到你想要的结果。当然每当你有修改时都需要从新执行一遍webpack,这会很不方便,所以我们可以使用webpack --watch,进行实时监听
    f、如果想要浏览器实时刷新的话,就要用到webpack-dev-server了,输入命令webpack-dev-server,它会自动给你部署一个路径,然后你登进去就可以看到实时更新的页面了,当然如果你想修改一下它部署服务器的地址的话,你需要输入# webpack-dev-server --contentbase src --inline --hot
    g、需要安装的包有如下

    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-mixin": "^2.0.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
    

    二:github项目管理

    1、GitHub项目管理
    我们一般在网上管理自己所写的项目的时候,一般都会选择GitHub社区,而在GitHub上面进行项目管理的时候,我们可能有很多小问题都忽略了。往往一个项目都需要注意以下几个东西:

    README.md 用于简单介绍项目,以及项目的使用方法

    我们一般把项目整体架构的介绍,还有项目的使用及维护方法都放在README.md文件下面,此文件是用Markdown语法进行书写

    .gitignore 用于限制你上传的文件

    当我们在使用git命令把本地仓库的代码上传的远程仓库时,有些东西是不需要一并上传的,例如node_modules文件夹(只要有package.json文件就可以随时下载包),还有一些操作不当的错误文件等。

    LICENSE 可以限制别人使用你的项目

    但遵循GitHub社区开源的思想,一般我们都会把权限开的最大,让大家一起使用讨论

    EditorConfig 定义和维护一致的编码风格

    可以让你为这个项目提供的代码按照规范书写

    ESLint 帮助我们检查Javascript编程的语法错误

    让我们在编程过程中检查错误,而不是执行的时候才知道错误

    package.json 整个项目的配置中心

    它定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)

    src 源码目录

    我们开发的源代码一般都放在这个文件夹下面

  • 相关阅读:
    网络管理 之 Fedora Core 网络配置工具systemconfignetwork介绍
    文件系统管理 之 在Fedora core 4.0 加载NTFS和FAT32分区详述
    系统引导管理 之 系统引导管理器GRUB,为初学者指南
    文件系统管理 之 reiserfs文件系统反删除(Undelete)操作的实践
    文件系统管理 之 Linux 文件系统概述
    安装配置管理 之 apt+synaptic 为Fedora core 4.0 中安装Nvida芯片显示卡及Ati 卡显示驱动
    安装配置管理 之 安装和配置 JPackage Java
    安装配置管理 之 Fedora 6.0 蓝牙bluebooth传送文件的问题解决方法
    软件包管理 之 关于Fedora Core 5.0 通过Yum在线升级说明
    软件包管理 之 文件解压缩
  • 原文地址:https://www.cnblogs.com/firefish1/p/8110232.html
Copyright © 2011-2022 走看看