How can we version our JavaScript files - javascript

The context : we are working on Windows OS (VS 2017, VS Code) with many JavaScript files, for ex: in the 'controls' folder we will have control1.js, control2.js etc (different people working on different controls).
|- controls
|- control1.js
|- control2.js
On the 'apps' folder we will have :
|-apps
|- app1
|- view.js
|- controller.js
|- model.js
|- app2
|- view.js
|- controller.js
|- model.js
Now, the idea is that the testing team will/might find errors that needs to be fixed. We will fix the code and re-deploy the fixed file (for ex. control1.js) to the specific testing team. If another team (working on a different environment) reports another error in the same file (control1.js) there is no way for us to know if the current environment has the fix mentioned above or not (only code-compare will tell us).
There is no file version that will help us know where (in what version) the issue happened and in what version it was fixed.
What do we want - (maybe this problem was already solved but I didn't find anything) - we want that # check-in-time the version of the JavaScript file to be increased (probably the release number as in C#). We are using as version-control TFS (on premises) and VSTS/Git (online at visualstudio.com).
How ? - each JavaScript file will have some sort of header (a large area at the top of the file with some commented text) that will contain some information about the company etc ... and also the version of the file ex.: 1.0.2.23.
In this way we will know in what version a fix was done (the bug tracking system requires us to mention in what version the bug was found and in what version it was fixed.
How can we simulate this in VS 2017 (2015) and also in VS Code ?
Can we have a single file (the same as AssemblyInfo.cs in C#) common to all JavaScript files and than that file to be ... merged with each JavaScript file?In this way, if we need to change something globally we will not need to ... find/replace all over the place ?
Thank you in advance.

For the situation that a file (such as control1.js) need to be modfied by multiple people:
If the file need to be double tested by testing team after you fixed, you can modify the file on another branch and then merged into current working branch by testing team.
If testing team won’t test the fixed file, you can modify the file directly on current branch, and push the branch to TFS/VSTS. After that, if other team members also need to modify the same team, they can pull the changes you made and fix the file based on the newest version.
For the version of file:
Actually it’s a new version when you commit changes every time, git will calculate a new SHA-1 checksum (commit id) like a11bef06a3f659402fe7563abf99ad00de2209e6, you can view in VS -> Team Explorer -> Branches -> right click a branch -> View History.
If you want to a version more readable, you can add a tag for a commit, such as in View History -> right click a commit -> Create Tag -> then enter a tag name such as 1.0.2.23.
And you don’t need a single file to record the file version since git can manage the versions for every changes you made.
To get the version that test team deployed, you can use these steps: open the release -> Artifacts -> find the build definition and build version -> find the build version in build Tab -> in the summary page you can find git version in Source version.

We use versions formed as <major>.<minor>.<changeset>-<buildid>-<branch> to keep track of versions deployed. On each deploy custom IIS response header field "X-Release" is updated with version number so that QA/PM always can check what code version they are working with in the developers tools:
However, we are using Octopus Deploy so cannot tell how to do this in TFS release.

Related

ember.js include custom js

Attempting to wrap my head around Ember.js.
Seems I understand the complex things, but miss out on the little things.
How would one go about adding an example.js file?
For simplicity, let's say the example.js file only contains:
(function(){
console.log("example is alive in console");
})(window);
This should display "example is alive in console" within the browser console.
I have tried:
adding app.import('vendor/javascripts/example.js'); within ember-cli-build.js and adding <script src="{{rootURL}}vendor/javascripts/example.js"></script> to index.html
Console is showing
ⓧ GET http://localhost:4200/vendor/javascripts/example.js
DEBUG: -------------------------------
DEBUG: Ember : 2.11.3
DEBUG: Ember Data : 2.12.1
DEBUG: jQuery : 3.2.1
DEBUG: -------------------------------
ⓧ GET http://localhost:4200/vendor/javascripts/example.js
All of the answers I have found stated that just adding custom.js to vendor file works. Sadly, I am missing something.
When modifying ember-cli-build.js you MUST RESTART the ember server manually. The livereload server will not pick up the changes.
This works for me when I don't nest assets in the /vendor directory. The ember-cli build process bundles JS files in /vendor into a single vendor.js file, which you can see linked in app/index.html. So place your example.js file at the root of /vendor, and then add the import to ember-cli-build.js:
app.import('vendor/example.js`);
Now when you start the server, your code from example.js should execute, since it will be included in assets/vendor.js.
Firstly, Ember.js has Convention Over Configuration approach, and your URL can do a lot of things than a normal HTML website.
Whatever you may want to do with your custom.js file it is not ember way of having it as a path. You need routes for navigation across the app. Although routes do much more than navigation. You specify the structure of your app that a user can browse through using Router's map function in app/router.js file.
However if you want to include custome.js file in your app, and have custom.js do some set of tasks for your app. You can simply go ahead and create a directory with any name, javascript for instance inside app directory. Have your javascript files placed inside it. Then you can import these files as simply as referencing any other files in ember:
import customObject from 'yourApp/javascript/custom.js';
Here, your custom.js should be exporting customObject.
Do read the guides if you want to learn more. And the API docs if you actually want to learn more.
Note: At the time of writing this answer current ember-cli version is #2.12.0

Google blocked my site: all *.js files infected. How to find a process that infects my JavaScript code?

I have a site, online shop.
A few days ago my antivirus began to issue warnings that some of the *.js files are infected.
I looked at this infected files and found that the following code appended at the end (showed only part of it):
/*! jQuery v1.11.3 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */
!function(a,b){"object"==typeof module&&"object"==typeof module.exports? ...
...
/*95d84650ccbbad8b650fac933d031bf0*/
var _0xf19b=["\x6F\x6E\x6C\x6F\x61\x64","\x67\x65\x74\x44\x61\x74\x65", ... // and so on
/*95d84650ccbbad8b650fac933d031bf0*/
I checked my system by antivirus and it nothing found.
clamscan -r --move=/home/USER/VIRUS /
I updated my WordPress and manually remove the code that was appended at the end of the *.js files.
Some time later, this code appeared again.
I tried to delete it, modify or make commented out. I tried to find the malicious code using grep, but did not find anything ...
Nothing helps. Time is passed, and all my *.js files now "infected". As a result of my site is blocked now...
How can I find a process that appends this is -
...
/*95d84650ccbbad8b650fac933d031bf0*/
var _0xf19b=["\x6F\x6E\x6C\x6F\x61\x64","\x67\x65\x74\x44\x61\x74\x65", ... // and so on
/*95d84650ccbbad8b650fac933d031bf0*/
at the end of each *js file?
Search for infected files using below bash command:
grep -r ";document\[_" /path/to/www/folder/
And if you want to list only file names then add -l
grep -rl ";document\[_" /path/to/www/folder/
and change all folder permission to 755 using below command:
find /path/to/www/folder/* -type d ! -perm 0755 -print0 | xargs -0 chmod 0755
note: command will change directory permission to 755 if not.
Without inspecting the server, it is difficult to find out the problem.
How about changing the permissions to the files? Can you remove the write permissions?
The right and permanent solution to this problem -----
The .js files are getting infected again after some minutes or a particular time is because the hackers has configured a cron-job on your server to do so .
So first remove that cron job by accessing the cron job functions of your server .
After that no need to change the permission or all that moving to every single file, just install a plugin named wordfence scan your site with it (enable the plugin scan also) it will show you all the changes in the original to the current files then select all the repairable files and restore them to the original state .
The infection will not come back this time. To make sure scan the site again with wordfence the results will be positive .
Thanks.
I created a removal script for the specific one that infected my server here.

Unable to see comments in javascript files generated by TypeScript

I have created a TypeScript(.ts) file. Which upon save generates a minified JavScript file and a normal(readable) JavaScript file. All this works fine. But the comments I have added is TypeScript file is not visible in auto-generated JavaScript file. Since you cannot debug a TypeScript file (to add breakpoint, one need to use JavaScript file) and comments are not available in JavaScript file, I have to switch between .TS file and .JS file while debugging. Is there way to tell TypeScript, not to remove the comments user have added?
Pass the --comments switch on the command-line to preserve comments.
If you have WebEssentials installed, you can set this in the WebEssentials Options:
If you do not have WebEssentials installed, stop what you are doing and go install it first from NuGet. This is a great extension that will add all kinds of helpful features for web development.
0.8.2.0
If you created a TypeScript project with version 0.8.2.0 of the TypeScript Visual Studio extension (the latest version), you'll find there is an option in the project file for this:
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
<TypeScriptTarget>ES3</TypeScriptTarget>
<TypeScriptIncludeComments>false</TypeScriptIncludeComments>
<TypeScriptSourceMap>false</TypeScriptSourceMap>
</PropertyGroup>
By default it is false, but you can just switch it to true:
<TypeScriptIncludeComments>true</TypeScriptIncludeComments>
To edit this setting, you need to right-click on the project and select "Unload", then right-click on it again and hit "Edit". These settings are at the bottom of the file you will edit.
When you have changed the setting, right-click on the project again and hit "Re-load" and you'll be up and running again.
Previous Versions
In previous versions (if you created the project in a previous version, if you later updated to 0.8.2.0), you'll have to fiddle with the command, but the process is almost the same.
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\tsc" #(TypeScriptCompile ->'"%(fullpath)"', ' ')" />
Change it to this:
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\tsc" --comments #(TypeScriptCompile ->'"%(fullpath)"', ' ')" />
Once again, to edit this setting, you need to right-click on the project and select "Unload", then right-click on it again and hit "Edit". These settings are at the bottom of the file you will edit.
When you have changed the setting, right-click on the project again and hit "Re-load" and you'll be up and running again.

Dajaxice javascript core file not getting parsed

I've been looking everywhere for answer to my questions last few hours and couldn't find anything, so i decided to ask.
I followed installation instruction in docs of Dajaxice, got everything setup exacly the same, but unfortunetely my Dajax.core.js file is not getting parsed, so when i click on the javascript link in page html source it still contains template tags. I included the Dajaxice finder in staticfiles_finder(actually i ve got everything setup like in the ins instruction.
I am using django 1.4.1 develop server at the moment for testing and the latest Dajaxice version which is 0.9, is that make any difference ?
Does the order of vars in settings.py matters ?
What are the main reasons the Javascript files are not getting parsed, and actually when they should be parsed ?
Please help me as i really would love to use this app but just can't get it to work.
Thanks in advance.
I advice you to check STATICFILES_FINDERS settings and other settings related to django.contrib.staticfiles app. Dajaxice uses a hook in this app to generate dajaxice.core file.
When you use debug server this static file is generated on the fly, on production environment the file will be generated when you run collectstatic command.
In your case it looks like the dajaxice.core.js file is founded by another static finder or served in any other way.
To check this please run the following command
python manage.py findstatic dajaxice/dajaxice.core.js
The output should look like
Found 'dajaxice/dajaxice.core.js' here:
/tmp/tmp9nzeEd
The filename in tmp dir will be different
Also 2 pitfalls with collect static app:
When you update your ajax.py file to include new dajaxice views you have to run collectstatic again
The file is generated in /tmp/ folder. So if you use -l key to generate links instead of copying files make sure that you will not remove this file by accident.

AJAX Built and Deployment Environment especially javascript and css min, full versions

Currently I have one QA server to run on, svn update can be run there to test the code that everyone commits to subversion.
The issue I have seen with more and more javascript and css that the min or full version that get compiled, eg:
Build tool: Jake
JS compressor: UglifyJS
CSS optimizer: CSSO
either have to manually be updated/compiled just before promotion to production servers or we just have the min/full version on our svn but that would be not so great.
The way I see an approach would be:
* keep the full/split css java script files outside of the path where web served content sits, subversion or trac builds the min/full version on submit/trigger.
Has anyone further automated this process?
How do you separate your full source/full version/min version as not to mess up final deployment? When do you compile the min version?
Only at the last step before going to production?
Where do you leave the original source, it cannot live right next to the web served other files, in my example php files?
Just been dealing with something similar myself. If I understand your question correctly you're looking to have unminified files in a local or dev environment but have them minified upon deployment. There are, of course, many different ways that you can go about this, and we're currently working on a better solution but I'll give you an example of a project I just finished up...
Uses symfony 1.4, YUI Compressor, and git.
I have a symfony task (php cli script) set up to run YUI Compressor on a given list of css and js files, which get dumped into min.css and min.js in the appropriate directories. The script simply dumps all of the contents of the listed files into one big file and minifies them. Then symfony is set to only use min.js. Of course, debugging minified files can be a pain, so another option is to skip minifying on your local or dev boxes and just keep them as a combined file. Personally I have it minifying anyway because Chrome's "Pretty print" option works well enough for me most of the time, although it's not 'ideal'.
I've created a local post-commit and server side post-merge script for git that simply runs the symfony task so the files are automatically updated whenever you commit locally or do a git pull on the server, so any changes made inside the js/css files are updated when committing. The only pain point of this is having to manually run the minify script whenever you've updated locally but haven't yet committed.
An alternative to keep unminified code on local/dev would require some more coding so that it is environment specific, which is certainly doable but I've just been lazy with it thus far as this works well enough for now :)
I have taken the following convention-based approach and it works well for me for traditional web-development as well as for mobile apps and offline HTML5 mobile apps.
Conventions
All non-minified/full-version js/css scripts are named with .debug.js or .debug.css extensions.
Example: global.debug.js and global.debug.css
All references to js/css in html reference non-debug versions: global.js or global.css
Process
I use a custom MSBuild task to minify js (using AjaxMin, but you could use YUI Compressor or others) to the following naming convention *.release.js or *.release.css
(Example: global.release.js).
After minification into the *.release.js files. I have one more MSBuild task that calls a simple batch file (JS.bat) that accepts the current Configuration (Debug or Release) and copies either the debug (full-source version) or the release (minified) version to the normal destination.
Here's the sample MSBuild tasks I add to my project file to accomplish the minification and call to my batch file:
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<Target Name="AfterBuild">
<ItemGroup>
<DebugJS Include="**\*.debug.js" />
</ItemGroup>
<AjaxMin SourceFiles="#(DebugJS)" SourceExtensionPattern="\.debug.js$" TargetExtension=".release.js" />
<Exec Command="JS.bat $(Configuration)" />
</Target>
For example, assuming:
I'm in Debug mode
and I have a global.debug.js file (full-source version that I work in)
When I build my project, global.debug.js get's minified into global.release.js
Since I'm in the Debug mode configuration, global.debug.js will get copied to global.js (which is what my html references) and, therefore, I'll have the full-source version when debugging
If I switch to Release mode configuration, then global.release.js (the minified version) gets copied to global.js and this is what I would want for release/deployment to production.
Here's the simple batch script (JS.bat) that I use to handle the copy of the Debug or Release script based on the passed argument:
#Echo off
REM ----------------------------------------------------------------------------------------
REM <summary>
REM Script used to copy the Debug (or Release) javascript files to the runtime location
REM </summary>
REM <history>
REM <change date="9/22/2010" author="Adam Anderly">Created</change>
REM </history>
REM ----------------------------------------------------------------------------------------
REM Grab the first argument as variable Config (Debug/Release)
SET Config=%~1
REM The loop below is used to get the Length of the Config variable
REM The Length variable is then used in the substring function on Line 22
for /f "tokens=1 delims=:" %%a in (
'^(echo."%Config%"^& echo.!##^)^|findstr /O /C:"!##" '
) do set /a Length=%%a-5 + 4
FOR /R %%i IN (*.%Config%.js) DO CALL :REN "%%i"
GOTO :END
:REN
SET File=%~f1
REM Set File2 variable to the runtime filename (minus .debug or .release)
CALL SET File2=%%File:~0,-%Length%%%.js
REM First make sure the destination file is not read-only
IF EXIST "%File2%" ATTRIB /S -R "%File2%"
REM Finally, we copy the current debug|release file to the runtime file
COPY /Y "%File%" "%File2%"
:END
The batch script above works recursively so you can have nested folders of js or css and it still works.
While I'm using MSBuild, you could certainly incorporate this batch file into your process using a different build tool (previously I did the same using NAnt).
Hope that helps!
Adam

Categories

Resources