I am currently developing a Typescript application using lit html. I have reached the point where I want to bundle all my typescript files, minimize them in to a single javascript file. Using VS Code as the IDE.
I have been looking at options - rollup.js is one option but I couldn't work out how to bundle multiple ts files in to a single js file, minimize it and also ensure the modules are handled correctly.
Any examples of using rollup.js to do such available or another alternative available?
You can use Parcel js for this as well. This will generate one js file. but if you require rollup js, may be this link will help you out.
Generate typescript definition files using rollup
Related
I am running on a huge project with thousands of .js files that are written in es5, and for many reasons and benefits of TS, we've decided to start migrating to TS, after a couple of days and many pieces of research, I am going to elaborate a couple of points:
To start migrating from es5 to ts we can start either by two ways:
First way:
1- Installing ts, creating tsconfig with allowJS set to true then start changing the extension of files to .ts and everything will work by default
2- As we want to migrate gradually we don't want at once to replace the global scripts to native modules, in other words, we don't want immediately to type import and export, but instead we want to keep the old way global scripts and use /// <reference path=""> to load dependencies
3- after previous step we can gradually start turning the files into native modules esm
Second way:
1- As I've read about UMD it will work on both borwser(client) and server, which means support all type of modules AMD, CommonJS, SystemJS and Native ES modules
2- after re-writing the scripts in UMD fashion, we can gradually start moving our scripts to ESM
last but not least, and regarding the intelligence we'll start writing .d.ts files accordingly or we can rely on ts-loader to generate the files
lastly, we either go with ts-loader or babel but we are not sure if there are couple of limitations for each of which
Any idea is really appreciated on what is the best way to start migrating
Maybe this tool can help you:
https://github.com/airbnb/ts-migrate
ts-migrate is a tool for helping migrate code to TypeScript. It takes a JavaScript, or a partial TypeScript, project in and gives a compiling TypeScript project out.
ts-migrate is intended to accelerate the TypeScript migration process. The resulting code will pass the build, but a followup is required to improve type safety.
If possible, start fresh and write migration script which does copy/paste task of code. In which Project setup will be error free in term of compile/build/run/lint. So even in future there won't be any issue you just need to add modules. You can migrate module by module.
Now if you are migrating to TS means not just by extension or package type, because it won't benefit more, you will need to change in code like types, interfaces, configs etc.
So starting a fresh project and then converting code to TS and then gradually moving should be better.
I would suggest you should write new modules in typescript and slowly convert existing files and modules to typescript. But keep the output in js only. Convert each ts file into js, For e.g, if you have a module Utils create two folders inside this ts and js. Write a build script which will convert ts to js and move inside the js folder. This way you will be converting all files into ts. For import/export you can start it for the new module. I have done the same in one project.
Regards,
omi
I appreciate all the answers but for my case it is so complicated because ts modules will affect the scope, what I found useful is using what so-called shimmer modules in webpack which allows a feature called imports-loader which I can use to manipulate the scope of js, hence nothing is broken, then I can move file by file to start migrating
I need your help with website project I'm working on. My project consits of 7 html documents, 3 stylesheets, 8 .js (including jquery.min.js and some jquery plugins) and some pictures. I want to bundle and minify it as much as it is possible (it would be good to get only 1 css and 1 js file or maybe 1 js, which contains styles inside).
For clarity - now, when I have all dependencies in html - everything is working properly. But I'm not sure how to set all module.exports and requires. Could you tell me how to do it step-by-step in a proper way?
Many thanks in advance.
PS. I write in ES5, so I don't use Babel.
You can do the following to make your codebase a bit more tidy.
Manually group the content of your relevant js files into one and export it as a nodejs module by using module.exports = module_name on the top of your merged js script (Repeat as needed for any jscripts in your project).
Then include the exported module in your main node file and include its main functionality using var modulesfile = require(./module_name); Please note directory paths while importing your js modules.
You can also run a minifier like minifyjs to make your js files size even smaller if they need to be called multiple times from a url. Nodejs installation and usage for minifyjs can be found here.
You can also call other css from within existing ones by using the
#import url("./css/filename.css"); Just verify proper css directory paths first.
In case you also want to use browserify for node there is a full guide in the npm website.
Another good and simple solution is to move all of your codebase in a visual studio web project. From there you can do pretty much what you want, organize your scripts and css files (/Scripts and /Content directories) in bundled configuration files etc.
NOTE: All your code has to be migrated to an asp .NET project to use this approach (as per Microsoft doc) properly.
It would be nice if one can run node.js code inside Excel user-defined functions. Something like using js code like VBA.
I googled for solutions but cannot find any. Is it possible to do this?
Yes, if you want to use packages from NPM. You could use webpack to combine all the stuff to one js file, it should work.
webpack as a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. you could refers to this document.
You could also refer to a sample, Yeoman, the Yeoman generator creates a Node.js Office Add-in project. it use webpack combine all files into one js file.
I have a library that I'm building in TypeScript. I'd like to include this library in both TypeScript and JavaScript Node projects. What is the general strategy to do this? Should I compile and have two versions or is there some other strategy I should be using?
I'd like to include this library in both TypeScript and JavaScript Node projects. What is the general strategy to do this?
Compile with the following to get the js output:
--module commonjs --outDir ./dist
This should make your project consumable by JS projects. To make it consumable by TS projects you need to generate a declaration file. This can be done using https://github.com/SitePen/dts-generator See usage for details : https://github.com/SitePen/dts-generator#usage
Note: There is discussion on removing the dts-generator dependency : https://github.com/Microsoft/TypeScript/issues/2338
In most cases I have seen you have a /dist/ folder where the compiled JavaScript is located.
Usually there is also a minified version like yourfilename.min.js - the rest is either outside or in a /src/ folder, so outside you have only the license/readme.md, package.json left and maybe the file for Grunt/Gulp (it is considered polite to - if you use a taskrunner - include a Grunt/Gulp file for compiling the typescript and minify the .js file afterwards, as far as I got it)
If you want to preserve the TypeScript advantages when using it in TypeScript projects, then you obviously have to expose a TypeScript version of the code so the TypeScript compiler can see the TypeScript declarations for your interface.
But, if you want people to be able to use your library in plain Javascript projects (that don't compile TypeScript into JS), then you have to offer a version that has a plain Javascript interface and where the code has already been compiled into plain JS.
So, if you want both of those advantages, then you have to offer two separate versions. The plain JS version can obviously just be a compiled version of the TypeScript (compiled into plain JS).
I'm trying out TypeScript for the first time and I've downloaded the angularjs.TypeScript.DefinitelyTyped package from nuget but I cannot generate JavaScript files from it.
I've tried deleting the file, creating a new TypeScript file (called angular.ts) and this generates a JavaScript absolutely fine with the exact same code. I could keep this file and do the same with the others but it seems like I should be able to compile these sorts of files.
I've also looked into the Properties of my project and under TypeScript Build I have the following options activated:
ECMAScript version: ECMAScript 5
Compile on Save
Allow implicit 'any' types
Module system: none
Keep comments in JavaScript output
Generate source maps
I don't have any errors when I build my project and all of my other .ts files that I have added all generate JavaScript files without an issue. I've looked to see if this is a known Visual Studio issue but I can't seem to find much about it. Is there a setting for this or should it happen automatically?
Sorry if I misunderstood the question but you cannot compile d.ts files. When you see a d.ts file, you can think of it like a interface for a project that was not written in TypeScript.
For example, I use phaser game engine. So like everyone else, I go and get the phaser.js file. At this point, my TypeScript cannot understand this phaser.js file. So, I go and grab the phaser.d.ts file and it is that which contains the full API of the phaser.js.
So basically, .ts files will always compile to JavaScript, whereas .d.ts are the definition files providing the bridge to using a .js file!
We are using Typescript with Visual Studio in our app, but we also had some problems when trying to coerce VS 2013 to compile TypeScript to JavaScript. We opted out for Grunt plugin and no longer rely on VS. I suggest you do the same. One caveat: don't use watch in typescript Grunt task. It will trigger VS into infinite loop when you will be building your project. Instead when you apply changes to your .ts files, tab switch to command line and run grunt task for ts->js compilation.