我有一个 Wakanda 10,社区版本,使用 AngularJS 1.3.7 的解决方案,它还没有使用 LiveReload。
我想通过 LiveReload 升级到 Wakanda 11,社区版,AngularJS 1.5+。
最简单的方法是什么?
我了解我可能需要更改编码。
我应该下载 Wakanda 11 社区版,并使用它启动一个内置 LiveReload 的新项目,然后将我的项目复制到其中并调试吗?
我有一个 Wakanda 10,社区版本,使用 AngularJS 1.3.7 的解决方案,它还没有使用 LiveReload。
我想通过 LiveReload 升级到 Wakanda 11,社区版,AngularJS 1.5+。
最简单的方法是什么?
我了解我可能需要更改编码。
我应该下载 Wakanda 11 社区版,并使用它启动一个内置 LiveReload 的新项目,然后将我的项目复制到其中并调试吗?
为了升级您的应用程序,您有两个面临两个不同的问题:
A) 将 AngularJS 从 1.3.7 升级到 1.5.x。
这一步非常简单。有必要将应用程序中的 AngularJS 库替换为您想要的版本。如果 abower.json
包含在您的应用程序中(应该是因为我们说的是 Wakanda 脚手架应用程序),那么您可以修改以下行:
"dependencies": {
"angular": "~1.4.4",
"angular-wakanda": "~1.0.4"
}
并从应用程序的文件夹中在终端中运行命令bower update
以自动执行此操作。
更新angular-wakanda
到最新的兼容版本。
请注意,您正在升级 AngularJS 的次要版本,可能还有 angular-wakanda。API 和方法的微小更改可能会出现并破坏您的应用程序。
B) 将 live-reload 添加到您的应用程序
在最新的 Wakanda Studio 版本中进行了许多努力,以实现与不同脚手架的不可知兼容性。将实时重载添加到您的 Wakanda 应用程序意味着添加一个标准的实时重载工具包,就像您通常对 Web 应用程序所做的那样。
它可以用 Gulp、Webpack、Grunt、Browserify 制作。Wakanda Studio 会尝试运行任何环境。
由于angular-wakanda + Gulp live-reload 环境是实际脚手架中包含的环境,因此我建议您从以下方式开始:
在package.json
文件中添加以下内容devDependencies
:
"devDependencies": {
"gulp": "^3.9.0",
"gulp-connect": "^2.2.0",
"http-proxy-middleware": "^0.9.0",
"minimist": "^1.2.0"
}
为了触发gulp
,将以下内容添加到相同scripts
的package.json
文件中:
"scripts": {
"serve": "gulp serve",
"start": "npm run serve"
}
从现有的 Wakanda 解决方案创建或复制该gulpfile.js
文件。如果您喜欢比基本解决方案中实际包含的更通用的方法,则可以复制此 gulpfile.js 。如有必要,将配置参数调整到您的实际应用程序脚手架非常重要:
var defaultOptions = {
default: {
serverUrl: 'http://127.0.0.1:8081',
port: 8000,
livereloadPort: 35729,
app: 'app/',
output: 'app/',
}
};
最后重新打开解决方案并单击Run Page
。这应该触发一个npm install
和一个npm start
,这将触发gulp serve
将启用实时重新加载。
请注意,根据您使用的 Wakanda Studio 版本,实现可能会有细微的配置差异。我建议您始终更新到可用的最新版本。
为了更深入地了解 Wakanda Studio 构建过程,我还建议您查看本教程,该教程还解释了如何将 SASS 预编译添加到应用程序中。