从 1.3.7 升级时，使用 LiveReload 到达 AngularJS 1.5.+ 的推荐方法是什么？

Question

我有一个使用 AngularJS 1.3.7 的 Wakanda 10 社区版解决方案，但它还没有使用 LiveReload。

我想通过 LiveReload 升级到 Wakanda 11，社区版本，AngularJS 1.5+。

最简单的方法是什么？

我了解我可能需要更改编码。

我是否应该下载 Wakanda 11 社区版，并使用它启动一个内置 LiveReload 的新项目，然后将我的项目复制到其中并调试？

Answer 1

为了升级您的应用程序，您面临两个不同的问题：

A) 将 AngularJS 从 1.3.7 升级到 1.5.x。

这一步非常简单。有必要将应用程序中的 AngularJS 库替换为您想要的版本。 如果您的应用程序中包含bower.json（应该是因为我们说的是 Wakanda 脚手架应用程序），那么您可以修改以下行：

"dependencies": {
  "angular": "~1.4.4",
  "angular-wakanda": "~1.0.4"
}

并在终端中从应用程序的文件夹中运行命令bower update 以自动执行此操作。

将angular-wakanda 更新到最新的兼容版本。

请注意，您正在升级 AngularJS 的次要版本，可能还会升级 angular-wakanda。 API 和方法的微小更改可能会出现并破坏您的应用程序。

B) 向您的应用程序添加实时重载

在最新的 Wakanda Studio 版本中进行了许多努力，以实现与不同脚手架的不可知兼容性。向您的 Wakanda 应用程序添加实时重载意味着添加一个标准的实时重载工具包，就像您通常对 Web 应用程序所做的那样。

可以使用 Gulp、Webpack、Grunt、Browserify 制作。 Wakanda Studio 会尝试运行任何环境。

由于 angular-wakanda + Gulp live-reload 环境是实际脚手架中包含的环境，我建议您从它开始如下：

1. 在package.json 文件中添加以下devDependencies：

   "devDependencies": {
     "gulp": "^3.9.0",
     "gulp-connect": "^2.2.0",
     "http-proxy-middleware": "^0.9.0",
     "minimist": "^1.2.0"
   }
   

2. 为了触发gulp，请将以下scripts 添加到您的package.json 文件中：

   "scripts": {
     "serve": "gulp serve",
     "start": "npm run serve"
   }
   

3. 从现有的 Wakanda 解决方案创建或复制 gulpfile.js 文件。如果您喜欢比基本解决方案中实际包含的更通用的方法，您可以复制this gulpfile.js。如有必要，将配置参数调整到您的实际应用程序脚手架非常重要：

   var defaultOptions = {
     default: {
       serverUrl: 'http://127.0.0.1:8081',
       port: 8000,
       livereloadPort: 35729,
       app: 'app/',
       output: 'app/',
     }
   };
   

4. 最后重新打开解决方案并点击Run Page。这应该会触发npm install 和npm start，这将触发gulp serve，这将启用实时重新加载。

请注意，根据您使用的 Wakanda Studio 版本，实现可能会有细微的配置差异。我建议您始终更新到可用的最新版本。

为了更深入地了解 Wakanda Studio 构建过程，我还建议您查看 this tutorial，其中还解释了如何将 SASS 预编译添加到应用程序中。