Working with TypeScript and Sublime Text 3 using the T3S package. I'd like my NodeJS project to be structured like so:
/web.js
/views/some-view.js
/controllers/some-controller.js
[...]
/src
/src/web.ts
/src/views/some-view.ts
/src/controllers/some-controller.ts
In other words, I want all my .ts to be under /src and compile to individual .js files under /.
How can I configure T3S to compile my .ts files like this, without explicitly defining each and every .ts file in my sublime-project file?
If I cannot use T3S's build system to accomplish this, then is there a way to disable T3S's build system? Instead I'd make a Ruby filesystem watcher and compile every time a file is changed.
Instead I'd make a Ruby filesystem watcher and compile every time a file is changed.
There are already plenty of grunt plugins for TypeScript. E.g. grunt-ts. The option you need is --outDir : https://github.com/grunt-ts/grunt-ts#compiler-support
Related
I started a node js project written in TypeScript. I want to include import 'source-map-support/register'; in all my .ts files so I see the TS source on stack traces. Is there a way to do that without adding it to each file separately? Is there a different way to get the pre-compiled mapping on stack-traces \ debugging that will apply to the entire project?
Instead of doing it in source files, you can do it on the command line when you launch node, e.g:
node --require source-map-support/register
Or you can use a package like ts-node
P.S. Even doing it in your source files, you don't need it in every source file, just the "first" on you launch. Others required by the first (directly or indirectly) should get source-map-support automatically.
I'm very new to using npm and TypeScript so I'm hoping that I'm missing something obvious. We have authored a node package written in TypeScript for our own internal use. So, the source is written in Typescript, and the file structure looks like this:
src/myModule.ts
myModule.ts
Where myModule.ts looks like this:
export * from "./src/myModule";
I then run tsc to generate .js and .d.ts files. So, the files then look like this:
src/myModule.js
src/myModule.ts
src/myModule.d.ts
myModule.js
myModule.ts
myModule.d.ts
All of this gets pushed to git and then our main app includes this package as a dependency via a git URL. When I first attempted this, I got an error like this:
export * from "./src/myModule";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
After some searching around, I found that the issue was with the .ts files that were getting loaded in. So I added the following to my .npmignore:
*.ts
!*.d.ts
After doing this, it brings in the node package without any problems.
The problem I am running into is that I want to be able to run off of local changes to the node package during active development. I want to be able to make changes in the node package, and then have the main app pick up these changes so that I can make sure everything works together before pushing to git. Everything I find says to use npm link. This makes it point to my local directory as expected, but the problem is that it now has all the .ts files, and the same errors show up.
I'm sure npm link works great when everything is written in JavaScript, but we are using TypeScript to write everything. Is there a way to make this work with TypeScript?
This makes it point to my local directory as expected, but the problem is that it now has all the .ts files, and the same errors show up.
The errors will only show up if you have those .ts files and a seperate declaration for those files.
Recommended fix
Just use the seperate .ts/.js/.d.ts files and steer clear of bundling a single .d.ts.
I am starting a new Theme from scratch and have a file called 'Assets.json' in the root directory.
It maps the LESS file from the 'Assets' directory to a CSS file in the 'Styles' directory - great.
Can anyone point me in the right direction as to how I can make use of this, as it's exactly what I want but can't find any information on how to use it.
Thanks!
The Assets.json file is a way to plug into the default gulp script that is provided with Orchard. This script is able to process .less files (and others) in order to generate minified and non-minified versions of scripts or stylesheets, and bundle your grouped assets. This way you don't have to create your own gulp file for each module, just describe the assets you want to be processed and it will do it automatically.
It will also watch the files you described and re-process them when they have changed. The simplest way to use them is to copy-paste one from the core modules, and place them in your own module or theme. Then just run the main gulp file, or enable its support in Visual Studio. You can run npm install from the root folder for this.
I am trying to figure out how I can accomplish the following using brunch. This is the current directory structure for our app:
--app
--base (theme folder, considered the master for all themes)
--sass
--js
--theme2
--sass
--js
--theme3
--sass
--js
...so on
The base folder serves as a master for all other themes. However, if another theme has a file in the sass directory or js directory that matches one in the base folder it overrides that file in the base folder (this applies for imports as well).
I have so far created this which works the way it needs to but it circumvents the brunch pipeline in that I write out the files (doesn't currently support file concatenation) and I would prefer to do this using the proper brunch pipline.
What happens is that each sass or js file it encounters in the base folder is used to generate a new file for another theme. E.g say the base theme has a file called main.scss. The path passed to compile is base/scss/main.scss. Now I want to use this same file for the other themes so I get all the theme folders and dynamically use this base main.scss file for each of the other themes. However, I also alter the inner imports to substitute files imports if they exist in the other themes directory. Its not the same file being spat into multiple locations.
The problem is that I want to dynamically generate new CSS files for brunch to render to different folders not related to the original path passed in (and thus the joinTo config option for this path). By calling the callback, it automatically uses the original path parameter passed to the compile method.
Use overrides in your brunch-config to change your joinTos to include base plus the given theme. You can also customize the build output directory or anything else for each theme if that helps. Then run each build separately using a command like brunch build --env theme1.
I am trying to convert the app.js in my NodeJS project in webstorm, to application.ts. I pasted the app.js code into a new file "application.ts" and replaced "app.js" with "application.ts" in the package.json file. The .ts file is not getting converted to .js even though the FileWatcher for typescript is on and works on every other file in the project. But when I "run" the project in Webstorm, I the project actually starts and runs "app.js" which I have obviously not deleted. Not sure, what other settings need to be changed to get this right. I plan on renaming application.ts to app.ts to suit the convention, once its successfully converted.
--Update--
Here's what my typescript filewatcher settings look like:
Your file watcher is configured so that it merges all .ts files into a single main.js - see the arguments:
--out main.js
What is your application.ts - main application file? Would you like to generate a single .js for each .ts, or merge them? In the first case, you need to change the watcher arguments as follows:
--module commonjs --sourcemap $FileName$
then it will produce a singe js for each ts with name matching original ts file, with the format compatible with Node.js
To run the generated application.js instead of the original app.js from withihn WebStorm, you have to change the Node.js run configuration accordingly
By the way, if all you need is renaming 'app' to 'application', just refactor/rename original app.ts to application.ts - the generated files (.js and .map) will be updated accordingly
Some links you may find useful:
http://igorzelmanovich.blogspot.ru/2013/01/converting-existing-javascript-code-to.html
Is there a tool to convert JavaScript files to TypeScript
http://stackful-dev.com/typescript-nodejs-vim-and-linux-oh-my