web应用程序和web网站_如何使用版本控制使您的Web应用程序保持最新

web应用程序和web网站

by Kamlesh Chandnani

由Kamlesh Chandnani

如何使用版本控制使您的Web应用程序保持最新 (How to use version control to keep your web apps up to date)

Version Control helps you keep track of which users are using what version of your app.

版本控制可帮助您跟踪哪些用户正在使用您的应用程序的版本。

With native apps, you have to maintain the versioning of your app with each build. Then only you will be able to release the new version of your app to App Store/Play Store.

对于本机应用程序，您必须在每个构建版本中维护应用程序的版本。 然后，只有您才能将新版本的应用发布到App Store / Play商店。

But how will you maintain versioning for your web apps?

但是，您将如何维护Web应用程序的版本控制？

Story Time!

讲故事的时间！

In the early 90’s, there were server side languages like PHP, Java, and JSP, which helped all your users always get the latest version of your web app.

在90年代初，出现了服务器端语言，例如PHP，Java和JSP，这些语言可以帮助您的所有用户始终获得Web应用程序的最新版本。

But now Web Apps have reached a new level. Everything is client side! Hence we can take advantages of the concepts like pre-caching, on demand load, rendering meaningful data at the same time, and so on.

但是现在Web Apps达到了一个新的水平。 一切都在客户端！ 因此，我们可以利用预缓存，按需负载，同时渲染有意义的数据等概念的优势。

But this can also introduce issues if the user always accesses the cached copy of our web app.

但是，如果用户始终访问我们的Web应用程序的缓存副本，这也会带来问题。

Imagine a SaaS company whose end users are not aware of how to use web apps/next generation web apps/PWAs in the right way.

想象一下一家SaaS公司，其最终用户不知道如何以正确的方式使用Web应用程序/下一代Web应用程序/ PWA。

When it comes to modern web apps like PWAs, you cannot ensure that all your users are using the latest copy of your app’s code.

对于诸如PWA之类的现代Web应用程序，您不能确保所有用户都在使用应用程序代码的最新副本。

Assume that you have shipped your web app for the first time, and the users have started using it.The app gets cached after the first visit, and thereafter on each repetitive visit the user will get the cached copy of your app until the new version of your apps code is available. Everything works smoothly.

假设您是首次交付Web应用程序，并且用户已经开始使用它。在第一次访问后该应用程序将被缓存，此后每次重复访问时，用户将获得您应用程序的缓存副本，直到新版本您的应用程序代码可用。 一切正常。

But now assume that after some time, over the next iteration, you added some new functionality to your existing web app and deployed the new piece of code/bundles.

但是现在假设经过一段时间，在下一次迭代中，您向现有的Web应用程序添加了一些新功能，并部署了新的代码/捆绑。

***BOOM***

***繁荣***

How do you ensure that your users are using the latest version of your web app?

您如何确保用户使用的是Web应用程序的最新版本？

How will you identify how many users are still using the old version of your app?

您如何确定仍有多少用户仍在使用旧版应用程序？

All these questions encourage you to maintain and store the current version of your web app, so that whenever the users are using your app the app version is also getting stored in the DB server.

所有这些问题都鼓励您维护和存储Web应用程序的当前版本，以便每当用户使用您的应用程序时，该应用程序版本也将存储在数据库服务器中。

But the mystery of “How” to maintain versions remains unsolved!

但是“如何”维护版本的奥秘仍未解决！

Git Revision Webpack Plugin comes to your rescue if you use webpack for bundling your code.

如果您使用webpack捆绑代码，那么Git Revision Webpack插件将为您提供帮助。

It is a Simple webpack plugin that generates VERSION and COMMITHASH files during builds based on a local Git repository.

它是一个简单的webpack插件，可在构建过程中基于本地Git存储库生成VERSION和COMMITHASH文件。

用法 (Usage)

1. Add a tag to your commit.
   在提交中添加标签。

syntax: git tag <tag-name>git tag v1.0

2. Add the following to your webpack config file:

2.将以下内容添加到您的webpack配置文件中：

const GitRevisionPlugin = require("git-revision-webpack-plugin");

const gitRevisionPlugin = new GitRevisionPlugin();

3. Add webpack DefinePlugin in your plugins array.

3.在插件数组中添加webpack DefinePlugin 。

const plugins = [.....new webpack.DefinePlugin({APP_VERSION_INFO: {  VERSION: gitRevisionPlugin.version(), //returns the output of git- describe command  COMMITHASH: gitRevisionPlugin.commithash(), // returns last commit hash  BRANCH: gitRevisionPlugin.branch() // returns the branch name from which the build was run};})...]

4. Now use APP_VERSION_INFO anywhere inside your app as it will be globally available.

4.现在，在应用程序内的任何地方都可以使用APP_VERSION_INFO ，因为它将在全球范围内可用。

console.log('Check App Version ', APP_VERSION_INFO);

Did you like this story?Recommend (by clicking the ❤ button) or share this story so other people can read it!

你喜欢这个故事吗？ 推荐(单击❤按钮)或分享此故事，以便其他人可以阅读！

翻译自: https://www.freecodecamp.org/news/versioning-your-web-apps-38d9d1ccec05/

web应用程序和web网站