小白学react之altjs官方实例初探,npm常用命令速查

2019-10-01 14:35 来源:未知

小程序开发工具

图片 1

注:在npm中,包(package)、模块(module)、依赖(dependency)说的都是一回事儿。

天地会珠海分舵注:随着微信应用号的呼之欲出,相信新一轮的APP变革即将发生。从获得微信应用号邀请的业内人士发出来的一张开发工具源码截图可以看到,reacjs及其相应的FLUX框架altjs很有可能会成为前端开发主流。作为行业内人士,自己之前从来没有做过web及webapp开发,所以这方面算是一名小白。这段时间在忙完工作之余准备储备一下这方面的知识点,以免将来被微信应用号的浪潮所淹没。

天地会珠海分舵注:随着微信应用号的呼之欲出,相信新一轮的APP变革即将发生。从获得微信应用号邀请的业内人士发出来的一张开发工具源码截图可以看到,reacjs及其相应的FLUX框架altjs很有可能会成为前端开发主流。作为行业内人士,自己之前从来没有做过web及webapp开发,所以这方面算是一名小白。这段时间在忙完工作之余准备储备一下这方面的知识点,以免将来被微信应用号的浪潮所淹没。


本篇开始学习reactjs的FLUX框架altjs。学习最好的方法当然还是通过实例的阅读和改造了,但是学习之前,我们必须先要确保这些代码及其依赖的包是最新的,不然花了大时间而学习回来的是几年前的陈旧的知识就无谓了。

本篇开始学习reactjs的FLUX框架altjs。学习最好的方法当然还是通过实例的阅读和改造了,但是学习之前,我们必须先要确保这些代码及其依赖的包是最新的,不然花了大时间而学习回来的是几年前的陈旧的知识就无谓了。

常用命令

待通过本章将官方实例支持上最新的依赖包和工具包之后,往后会准备开几章来根据最新的altjs版本对代码进行改造,以及将打包工具从browserify改装成时下更流行的webpack,期待大家对techgogogo公众号的持续关注。

待通过本章将官方实例支持上最新的依赖包和工具包之后,往后会准备开几章来根据最新的altjs版本对代码进行改造,以及将打包工具从browserify改装成时下更流行的webpack,期待大家对techgogogo公众号的持续关注。

npm init 初始化项目,其实就是创建一个package.json文件。
npm install 安装所有项目依赖。
npm help xxx 查看xxx命令的帮助信息。
npm search 搜索(快捷方式:find, s)

注:开始之前希望大家对reactjs和FLUX有基本的了解,可以参考最后一小节。如果现在确实没有时间去了解的,也可以先根据本章的描述将实例搭建运行起来,到时对着代码修改调试,相信很多知识点就自然而然的通了。

注:开始之前希望大家对reactjs和FLUX有基本的了解,可以参考最后一小节。如果现在确实没有时间去了解的,也可以先根据本章的描述将实例搭建运行起来,到时对着代码修改调试,相信很多知识点就自然而然的通了。

xxx 搜索xxx 如:npm search jquery。

1. altjs官方实例下载


altjs官方提供了相应的入门实例,大家可以进入进入其官网查看:http://alt.js.org/guide/

实例的源码可以从github获得:https://github.com/goatslacker/alt-tutorial.git

我们首先将其clone下来:bashgit clone https://github.com/goatslacker/alt-tutorial.git#2. 官方实例依赖安装---这是一个基于nodejs的项目,所有的依赖必然都是在项目的package.json中配置好的。

{ 
"name": "alt-tutorial",
"version": "1.0.0",
"description": "A simple flux tutorial built with alt and react",
 "main": "server.js", 
"dependencies": { "alt": "^0.16.0", "react": "^0.12.2" }, 
"devDependencies": { "browserify": "^8.0.3", "reactify": "^0.17.1" }, 
"scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", 
"start": "npm run build && open 'index.html' " }, 
"author": "Josh Perez <josh@goatslacker.com>", 
"license": "MIT"}

所以源码clone下来后我们首先要做的就是在项目中执行npm install去安装package.json中指定的依赖了。

npm install```

#3. 官方实例运行
---
依赖安装完后我们返回来再看下package.json中的scripts那部分配置:``` json{ "scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", "start": "npm run build && open 'index.html' " },}``` 可以看到整个项目是通过browserify来进行构建管理的(往后我准备将其切换成更流行的webpack),而在运行命令“start“中会自动调用“build“来进行构建,构建好后就直接在浏览器中打开index.html进行显示。所以我们现在直接调用“start“来构建并运行:``` bashnpm run start```然后默认浏览器(我的是chrome)就会打开相应的页面,我们可以点击“favorite“按钮来将相应的location加到Favorite下面:![运行页面](http://upload-images.jianshu.io/upload_images/264714-f791d3f7c3c38446?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

玩了下会发现这个例子很简单直观,就是上面显示相应的一些地名Locations,然后通过点击每个地名后面的Favorite按钮可以将对应的地名添加到下面的Favorites列表里面。

#4. 依赖升级
---
##4.1 依赖包升级状态查看

从官方实例的修改历史可以看到,该实例代码有点老了,特别是在nodejs更新迭代如此快速的今天。

![altjs官方实例](http://upload-images.jianshu.io/upload_images/264714-89cafcef4234e952?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

我们也可以通过npm来查看依赖模块的版本情况:

``` bash
npm outdate

npm update

其中:

  • Package: 依赖包的名字
  • Current: 当前安装版本
  • Wanted: Package.json中期望的版本
  • Latest: 当前市面最新的版本

1. altjs官方实例下载


altjs官方提供了相应的入门实例,大家可以进入进入其官网查看:

实例的源码可以从github获得:

我们首先将其clone下来:

git clone https://github.com/goatslacker/alt-tutorial.git

npm install 安装 (快捷方式:i)

4.2 软件运行依赖包升级

那么我们如何将这些依赖包批量升级到最新版本呢?我找到的一个方法是,首先将package.json中"dependencies"或"devDependencies"的所有的依赖包项设置成*号,然后再执行npm update, 然后就会获得最新版本。

我们先进行软件运行依赖包dependencies的升级:

{ "name": "alt-tutorial", 
"version": "1.0.0", 
"description": "A simple flux tutorial built with alt and react",
 "main": "server.js", 
"dependencies": { "alt": "*", "react": "*" },
 "devDependencies": { "browserify": "^8.0.3", "reactify": "^0.17.1" }, 
"scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", 
"start": "npm run build && open 'index.html' " },
 "author": "Josh Perez <josh@goatslacker.com>", 
"license": "MIT"}

然后执行npm update --save来安装最新的版本并记录到package.json里面

 bashnpm update --save

安装完成后执行 npm oudate

bashnpm outdate

npm outdate

可以看到dependencies的依赖已经更新到最新的版本(所以没有显示出来,因为这个命令是查看是否需要更新的)。但是开发工具相关的依赖devDependencies还没有更新,因为我们刚才只是将dependencies相关的依赖设置成*号来进行批量更新。

最后查看package.json可以看到dependencies已经更新到最新版本:

{ "name": "alt-tutorial", 
"version": "1.0.0",
 "description": "A simple flux tutorial built with alt and react", 
"main": "server.js", 
"dependencies": { "alt": "^0.18.6", "react": "^15.3.2" }, 
"devDependencies": { "browserify": "^8.0.3", "reactify": "^0.17.1" }, 
"scripts": { 
"build": "browserify -t [reactify --es6] src/App.jsx >build/app.js", 
"start": "npm run build && open 'index.html' "
 },
 "author": "Josh Perez <josh@goatslacker.com>", 
"license": "MIT"}

2. 官方实例依赖安装


这是一个基于nodejs的项目,所有的依赖必然都是在项目的package.json中配置好的。

{
  "name": "alt-tutorial",
  "version": "1.0.0",
  "description": "A simple flux tutorial built with alt and react",
  "main": "server.js",
  "dependencies": {
    "alt": "^0.16.0",
    "react": "^0.12.2"
  },
  "devDependencies": {
    "browserify": "^8.0.3",
    "reactify": "^0.17.1"
  },
  "scripts": {
    "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js",
    "start": "npm run build && open 'index.html' "
  },
  "author": "Josh Perez <josh@goatslacker.com>",
  "license": "MIT"
}

所以源码clone下来后我们首先要做的就是在项目中执行npm install去安装package.json中指定的依赖了。

npm install

xxx 搜索并安装xxx(局部)。安装多个依赖可用空格分割,如npm i jquery bootstrap。
xxx -g 搜索并安装xxx(全局)。安装多个同上。
xxx -D 安装并将依赖信息写在package.json中的devDependencies中。
快捷方式 i均可,如npm i jquery。
xxx@版本号 指定需要安装的版本号,若不指定将安装最新的稳定版本。
npm uninstall 卸载(快捷方式:rm, r)

TAG标签:
版权声明:本文由金沙澳门官网4166发布于文物考古,转载请注明出处:小白学react之altjs官方实例初探,npm常用命令速查