vscode include asset folder to /build - javascript

I have a project, it's not Angular2 or anything. I'm just using typescript in vscode.
I've setup my tsconfig.json to output my .ts files to a single file in ./build. However, for convenience purposes I would also like to include a folder or file i.e: /lib which contains all the js files I'm using such as linq (http://www.javascriptlinq.com/), jquery & bootstrap etc...
Basically, I want the end product of my project concists of 1 or 2 .js files.

Thanks to toskv in the rely, the workaround for me was to add
"allowJs": true
in tsconfig.json. Also,
"include": [ "src/**/*" ]
doesn't like it when i add folders deeper than that so i had to chuck them in
/src/lib
rather than
/src/lib/somelib/file.js

Related

Does the `tsc` command accept .d.ts files?

I have a .d.ts file, and would like to compile it down to a .js file. Is this possible using the tsc command?
I know that the tsc command can take any .ts file and then compile it down .js file (I have tested this). However, I couldn't get it to take a .d.ts file as an input since it did not output any .js file for me.
I have tried to play around with tsconfig.json and this how my file looks like at the moment:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"outDir": "ali_output_javascript"
}
}
I also know the following about .d.ts and .ts files. Typescript declaration files (.d.ts) describe the shape of a JavaScript file. It allows you to use existing JavaScript code in TypeScript without having to write all the code in TypeScript. Typescript files (.ts) is just the standard file extension when writing in typescript.
From this medium article (https://medium.com/jspoint/typescript-compilation-the-typescript-compiler-4cb15f7244bc), it does say that TypeScript compilation looks for file extensions .ts and .d.ts:
Normally, you would use files or include option and provide file paths or glob patterns to include TypeScript files in the compilation process. However, you can drop the .ts extension from the glob pattern and let the TypeScript compiler search for the input files.
When a glob pattern doesn’t have a file extension, TypeScript looks for the files ending with .ts or .d.ts extension in the directory pointed by the glob pattern. The .d.ts file is a TypeScript declaration file, we have discussed this file type in the Declaration Files lesson (coming soon). When the allowJS compiler-option is set to true, the TypeScript will also search for .js files as well.
Please let me know if you any suggestions, and thank you for your time.
You misunderstood what .d.ts files are.
They are not supposed to be transpiled into .js files, .ts files are supposed to be transpiled into .js files and .d.ts files for strong typing in a JavaScript IDE, or for further use into a TypeScript project.
Also, .d.ts are not executable and cannot produce executable files as they are just empty shells with types, which is also know as ambient declaration, in TypeScript terms, which means "without implementation".

VueJS: Trying to compile two CSS files in /dist

I just began using Vue and I'm hitting a wall while trying to compile SCSS into separate files. I understand that any SCSS that I'm writing within components will be compiled into a single file (/dist/css/app[hash].css), but I would like separate files which aren't imported into any component for external use.
I have several SCSS files (frames.scss, lists.scss, and tables.scss ) that I would like to be compiled, minified, and prefixed into their own CSS files alongside the aforementioned CSS file.
I would like the build structure to look something like this (with the external CSS file existing alongside the app CSS file):
dist/
css/
app[hash].css
frames.css
lists.css
tables.css
I have very little experience with Webpack, so my vue.config.js file is currently empty and my postcss.config.js file is below:
module.exports = {
plugins: {
autoprefixer: {}
}
}
I've searched all over StackOverflow for a solution to no avail, so any help would be greatly appreciated!
For webpack 4, I think you want to look at mini-css-extract-plugin.
its a webpack plugin that, by, default, creates different files per input. You can use this with scss as you would expect. https://stackoverflow.com/a/53180597/6646536 might be a good example.
There is a similar tool i've used for webpack 3 here:
https://github.com/webpack-contrib/extract-text-webpack-plugin

Hiding .js files when having .ts

I just downaloade TypeScript for Visual Studio 2015. I am writing .ts file and it created .js file in the same level in solution. Does anyone know how to hide the .js file or have it 'inside' .ts so I could just expand .ts tree and see .js?
You can configure your project to create .js files in a specific folder.
In VS 2015, you can set the build directory from "Redirect Javascript output to directory" in the typescript build section of your project properties page.
If you use a tsconfig.json the project property pages will all be grayed out but you can specify the directory in the tsconfig.json file:
"compilerOptions": {
"outDir": "./built",

How can separate js files and ts files automatically in angular after npm start?

Can I get this result modifying tsconfig.json or package.json?
I want this structure:
angular2-quickstart
app
ts
app.component.ts
main.ts
js
app.component.js
app.component.js.map
main.js
main.js.map
index.html
license.md
no this:
angular2-quickstart
app
app.component.ts
main.ts
app.component.js
app.component.js.map
main.js
main.js.map
index.html
license.md
Yes, you can tell the TypeScript compiler to output .js files to a different directory using the outDir option in tsconfig.json, and I'd recommend setting the rootDir too so as to avoid unpleasant surprises in the future:
{
"compilerOptions": {
"outDir": "app/js",
"rootDir": "app/ts",
}
}
Don't forget to adjust paths in index.html.
If you want to separate out .js and .ts files in angular2, you have to follow only two steps:-
1) Add "outDir":"<folder name where you want to put your js Files>" within compilerOptions object in tsconfig.json file.
2) Map your folder in systemjs.config.js i.e modify the map object like
map:{
app:<Folder-Name which you have specified in outDir>
----
----
}

How to define relative dependency with brunch

Brunch allows for specifying the concatentation order in the JS processing via before and after.
I have the following dependency order:
some bower components
a setup file (setup.js)
more JS files
so basically the setup.js file needs the bower components to be there, but it must be loaded before other JS files.
If I put setup.js in the before list, it is included before the bower components.
How can I make sure setup.js gets included right between my bower components/vendor libs and my own JS.
before: [
'bower_components/**/*',
'setup.js'
]

Categories

Resources