小程序开发工具

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

本篇起先攻读reactjs的FLUX框架altjs。学习最好的主意自然依然通过实例的读书和改造了,不过读书从前,我们不可能不先要确保这些代码及其倚重的包是时尚的,不然花了大日子而学习回来的是几年前的陈旧的知识就无谓了。

待通过本章将法定实例襄助上流行的依赖包和工具包之后,将来会准备开几章来遵照最新的altjs版本对代码进行改建,以及将包裹工具从browserify改装成当下更流行的webpack,期待我们对techgogogo公众号的不止关注。

注:开头从前希望我们对reactjs和FLUX有中央的问询,能够参照最后一小节。假诺现在确实并虎时间去打听的,也可以先依照本章的叙说将实例搭建运行起来,到时对着代码修改调试,相信广大知识点就自然则然的通了。

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.
法定实例依赖安(Ryan)装—这是一个基于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: 当前市面最新的版本

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"}

4.3 软件开发依赖包升级


接下去我们将开发工具包devDependencies也共同更新了。同理,我们先将package.json中devDependencies相关的借助项设置成*:

{ "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": "*", "reactify": "*" },
 "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-dev命令来更新支出倚重包

npm update --save-dev

末段我们将会发觉package.json中的devDependencies的看重性项也漫天翻新了过来:

{ "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": "^13.1.0", "reactify": "^1.1.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
outdate命令将不会看出有亟待升级的依赖包。到此,我们的整个依靠包都已经擢升到新型。

5. AltContainer倚重包找不到错误


此刻称心满意(原谅自己用这一个词,小白都是相比较便于满意的)的本身准备npm run
start来一鼓作气的运行起任何实例的时候,却发现根本跑不起来:

AltContainer-Error

基于指示,应该是src/component下的web组件有采用到alt的AltContainer那么些包,而在提高依赖包后,这一个包却找不到了。我们率先看下代码中援引到AltContainer的地方,遵照指示,打开项目标src/components文件夹,可以看来下边有一个Locations.jsx文件,打开后来看文件最起先有对AltContainer的引用:

var React = require('react');
var AltContainer = require('alt/AltContainer');

据悉经验,出现这种题材的时候偏偏是多个原因:

  1. 其一依靠包没有正确安装
  2. 晋级后的依靠包调用/引用情势变了。

发出这种工作,第一时间想到的终将是去altjs的官网查阅了。在官网的API
Documentation
中很显然AltContainer的引用模式已经变了:

new way to import AltContainer

引用的不再是’alt/AltContainer’,而是’alt-container’,至于官网提醒中使用的严重性字’import’,估计应该是es6新星导入形式,现在先不管,今后攻读过程中有可能将以此类其它代码转换成es6,敬请期待。所以我们那里只需要基于官网指示将引用情势改成以下就好了:

 var React = require('react');
var AltContainer = require('alt-container');

当然,我们如故需要将以此依靠包给装上的:

npm install alt-container --save

这儿大家再构建运行:

npm run start

会发觉依然有报错,不过曾经不是AltContainer引用找不到的荒唐了。

6. chromeDebug模块找不到不当


从上述命令的出口我们可以见到这一次的失实是模块alt下的utils中找不到chromeDebug那么些引用:

chromeDebug-not-found

这此在altjs官网没有找到呼应的解决办法,可是问了下google,发现原本chromeDebug已经改成在alt-utils这多少个独立的模块的lib之下,所以只需要将相应的引用代码改一改就好了。依据指示,找到现身问题的代码是在src/alt.js代码中:

var Alt = require('alt');
var alt = new Alt();
var chromeDebug = require('alt/utils/chromeDebug')chromeDebug(alt);
module.exports = alt;

这里大家需要将chromeDebug的引用改成”alt-utils/lib/chromeDebug”:

var Alt = require('alt');
var alt = new Alt();
var chromeDebug = require('alt-utils/lib/chromeDebug')
chromeDebug(alt);
module.exports = alt;

接下来我们设置上alt-utils模块并将凭借保存到package.json上边

npm install alt-utils --save

这会儿再跑“ npm run start“的时候就不会再报任何不当。

7. React.render没定义错误


只是此时打开的是空手网页,打开chrome的开发者工具查看时发现错误如下:

react.rendor not a function

由来是在风行的reactjs版本中,渲染函数应该调用的是react-dom模块中的render,而非调用react模块中的render。追查后意识问题是处于src/App.jsx文件中:

var React = require('react');
var Locations = require('./components/Locations.jsx');
React.render( <Locations />, document.getElementById('ReactApp'));

此地我们需要改成:

var React = require('react');
var ReactDOM = require('react-dom');
var Locations = require('./components/Locations.jsx');
ReactDOM.render( <Locations />, document.getElementById('ReactApp'));

json,设置react-dom依赖模块:

npm install react-dom --save

接下来构建运行:

npm run build

8. dispatch 函数未定义错误


此时我们查阅打开的网页,可以看看Locations和Favorites几个列表的标题都曾经呈现出来,不过Locations下边的始末却从没显示。打开chrome开发调试工具:

dispatch-not-found

察觉是LocationActions.js中,每个action都调用了dispatch方法:

var alt = require('../alt');
class LocationActions { 
  updateLocations(locations) { 
      this.dispatch(locations); 
  } 
  fetchLocations() { 
      this.dispatch(); 
  }
  locationsFailed(errorMessage) { 
      this.dispatch(errorMessage); 
  } 
  favoriteLocation(location) { 
      this.dispatch(location); 
  }
}
module.exports = alt.createActions(LocationActions);

查看altjs官网得知,最新版本中我们不应当显式调用dispatch来将action分发到store,而是应该通过return来达到。所以最终的代码应该改成:

var alt = require('../alt');
class LocationActions { 
  updateLocations(locations) { 
    return locations; 
  } 
  fetchLocations() { 
    return null; 
  } 
  locationsFailed(errorMessage) { 
    return errorMessage; 
  } 
  favoriteLocation(location) { 
    return location; 
  }
}
module.exports = alt.createActions(LocationActions);

运作npm run start命令后我们能够看看所有页面可以正常突显和操作:

page

9. 小结


用作一名小白,通过本次的履行,这里关键有多少个地点需要小结下以便给自己提个醒:

  • 经过npm outdate查看当前依靠包的版本境况
  • 经过将package.json的依赖包的版本音讯设置成*号,然后通过“npm update
    –save“ 或者“npm update –save-dev“
    可以批量将有着的依赖性包升级到新型版本(这里假如有其余更好的格局的请在评价中指教)
  • 法定的reactjs-tutorial实例并不曾当即更新,稍不留神就可能学到的是有的破旧的文化-
    遇到问题时可以先考虑去官网找答案,效能往往会比去google来得快且准确

本章的相干代码已经停放github,本人fork了alt-tutorial到alt-tutorial-webpack,咱们可以clone出来然后切换来01那多少个branch来查阅本篇著作提到的附和代码修改。

github地址:https://github.com/kzlathander/alt-tutorial-webpack.git

10. 预备知识


假如对reactjs和flux的基本概念不理解的,请先查看阮一峰网络日记中的相应作品:

<<未完待续>>

相关文章

网站地图xml地图