TypeScript can globally target different versions of Javascript - you can switch between transpiling ES3, ES5 or ES6.
We have to support IE, so ES3 is our lowest common denominator.
However, good browsers (like Chrome) already support ES6, and will be able to run the significantly smaller ES6 code with optimisations.
So, from the same TypeScript source I want to serve ES3 to IE and ES6 to Chrome.
Is there a way to make TypeScript transpile multiple JS files (maybe as *.es3 and *.es6 or something like that) so we can pick which version to serve? (Ideally in VS 2015)
Alternatively in C# can I access the TypeScript transpiler to complete the step at run time?
You can actually specify which version you want to transpile to using the command line (--target ES3).
You can also specify an output directory, so that you can output both ES6 and ES3 transpiled code, and then chose which to reference on the fly (using old style IE ifs).
How about using different tsconfig.json files?
For example, something like:
- root
- ts-source
- js-es3
- tsconfig.json
- js
- js-es5
- tsconfig.json
- js
Then the root/js-es3/tsconfig.json:
{
"compilerOptions": {
"target": "ES3",
"outDir": "js",
"rootDir": "../ts-srouce"
}
}
And the root/js-es5/tsconfig.json:
{
"compilerOptions": {
"target": "ES5",
"outDir": "js",
"rootDir": "../ts-srouce"
}
}
I'm not a visual studio user so I don't know how to support different tsconfig.json files there, but even if you can't, then you can compile it using tsc.
Related
I am attempting to use SFML for my next project, however I have yet to find reliable information on how to install SFML for MinGW, the page on the main SFML website is for using code::blocks, and I would prefer to keep using VS Code if I could. Additionally all of the tutorials for visual studio are for older versions where the UI is much different. I was hoping that someone who has installed it could guide me through the steps they used to install it. Thanks.
I am on Windows.
Just to be clear, I have never used Visual Studio Code, but it supports Nuget Package Manager, so it should work the same as in the 'normal' Visual Studio. So after creating new project:
Your should be getting/installing Nuget Package Manager from here.
Then according to answers to this question, you should be able to Press Ctrl+P or Ctrl+Shift+P and search for SFML packages, and choose version 2.5.1.
There are five modules: Audio, Graphics, Network, System and Window, choose what you need or install all five.
As I said at the begining, I do not have a way to test it, but it should work.
This question is fairly old at this point but for anyone in the future wondering how I solved it, I ended up switching compilers to Clang and creating a .bat file the just runs clang++ and links the SFML lib directory. (SFML GCC-64 worked fine with Clang)
To fix any errors in VS Code, you can add SFML to the workspace config
in .vscode/c_cpp_properties.json:
add or edit a field called "configurations" (should be an array), and add the following:
"configurations": [
{
"name": "SFML",
"intelliSenseMode": "clang-x64",
"includePath": ["${defaultInclude}", "C:/libs/SFML/GCC-64-Bit/SFML-2.5.1/include"],
"compilerPath": "C:/msys64/mingw64/bin/clang++.exe",
"cStandard": "c11",
"cppStandard": "c++17",
"browse": {
"path": ["${workspaceFolder}"],
"limitSymbolsToIncludedHeaders": true,
"databaseFilename": ""
}
}
]
You'll have to change some of the paths to fit your setup, and you could very well put this in your global C++ configuration.
Finally, make sure that the needed DLLs are copied to your compilation output directory
I am trying to set up sass with Angular Dart but I'm a bit lost and couldn't find a documentation past 2016 (a good one)
I currently have the following structure:
However I cannot reference a main.css file as it is not found and if in a component I put something like this
styleUrls: ['lib/assets/sass/main.scss']
The webdev serve command fails
My pubscpec is
dependencies:
angular: ^5.0.0
angular_components: ^0.9.0
bootstrap_sass: any
dev_dependencies:
angular_test: ^2.0.0
sass_builder: ^2.1.1
build_runner: ^0.10.0
build_test: ^0.10.2
build_web_compilers: ^0.4.0
mockito: ^3.0.0
test: ^1.3.2
I cannot figure out what's wrong and also the structure I should use
Should I put in my top component main.scss (or the compiler main.css) and do not set any other file reference or should I include it at every component? And also how can I generate this compiled file when I run webdev serve
Thanks,
Alexi
So the references for styleUrls should always be the compiled css not the Sass file. Also the Urls need to be either relative to the file, or package format. So either 'main.css' or 'package:your_project/assets/sass/main.css'
I would also suggest not having separate asset directories. I tend to find having the sass file next to the component to be easier to maintain.
AngularDart also has style encapsulation by default; meaning CSS won't leak outside of the Components by default. Given this I find it better to have the CSS local to that component and be next to that component. You'll find that is the pattern on the angular components, and gallery.
One small note on the components, and gallery. They use the pattern style.scss.css instead of style.css which breaks the convention of Sass. The reasoning behind it is so that we can quickly tell what the source of the CSS file was. Was it written by hand, or did it come from Sass. This is achieved by having different settings in the build.yaml file. I don't think you should do this for your project tho.
I installed docfx.console through the nuget package manager (visual studios 2017 15.7.3) into a test project. My project is a .net library with a singular class with a bit of xml documentation. When I build the project it creates a _site file with a .html file but no documentation. It also generates an api, apidoc and articles folder and a docfx.json file.
The project throws the warning: Unable to find either toc.yml or toc.md inside obj/api/. Make sure the file is included in config file docfx.json!
I found a few similar issues in github which advised setting my visual studio version to 2015, however this solution doesn't appear to work with docfx.console as far as I can tell. Does anyone know how I might be able to correct this issue? Thank you
I also stumbled upon this issue when I was documenting an existing VB.net solution. Without knowing what your docfx.json file looks like or whether your .NET library is written in C# or VB.net, I can only provide a answer that fixed my issue and maybe will help with yours.
For me when installing docfx via nuget, the docfx.json file is set to be used with C# projects and not VB.Net projects by default.
I easily fixed this by modifying the docfx.json file and changing the metadata file source extension to search for *.vbproj:
"metadata": [
{
"src": [
{
"files": [
"*.vbproj"
],
"cwd": ".",
"exclude": [
"**/obj/**",
"**/bin/**",
"_site/**"
]
}
],
"dest": "obj/api"
}],
I've run into a rather annoying issue.
We have a very large code base which is mostly legacy code, and we have just begun implementing bootstrap. We have to "namespace" or "wrap" the bootstrap code in a class so that we can apply bootstrap to only parts of a page without affecting anything else.
If you're familiar with this technique, the common workaround is this:
.bootstrap-wrapper {
#import (less) "bootstrap.css";
}
See this issue: https://github.com/less/less.js/issues/1709
This works great as long as bootstrap.css is not minified. For whatever reason (probably something to do with semicolons), the minified version is not valid less even though it is valid css, and the less compiler errors out.
This wouldn't be much of an issue, except we are using Web Essentials (for VS 2013 update 4) to automatically compile our less into minified css files, and there is no granularity whatsoever.
We have the option to compile the unminified css files turned off, because we have no use for them, and only need the minified files. Since Web Essentials is all or nothing, there's no way for me to compile the unminified file in just this one case. We would have to carry an extra css file for every single compiled less file just to support this one case.
Are there any alternatives to creating a wrapper class this way, or is there anything I can do with Web Essentials to make this work?
Issue: In a freshly generated MVC 5 web project I have the option to set Typescript's compile option to none, RequireJS, or CommonJS. This is a site-wide compile option.
In a particular view, I need to work with esri's javascript api. This api encapsulates both RequireJS and Dojo, and if I choose RequireJS as the typescript compile option, everything works fine.
If I want to use typescript anywhere else in the site I have one of two problems: either the JavaScript emitted is in RequireJS format (no RequireJS is loaded outside of the one view) or if I load RequireJS into the project, I get conflicts with the esri library.
For more background see my Blog Post
Question: Is it possible to specify individual page(s) compile using different options for JavaScript emission within Visual Studio?
One option is to break your solution into multiple projects. In one project you can configure typescript to use AMD modules.
A second option would be to turn off the compiling of typescript at build time by Visual Studio and set up a gulp or grunt task to compile your typescript. This way you can choose to compile one set of files with AMD modules and another without AMD and not have to break your solution into multiple projects.