Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
ts-loader
Advanced tools
The ts-loader package is a TypeScript loader for webpack that allows you to transpile TypeScript files (.ts, .tsx) to JavaScript while bundling with webpack. It enables you to integrate TypeScript into your webpack build process.
Transpilation of TypeScript to JavaScript
This feature allows you to compile TypeScript files into JavaScript, enabling you to use TypeScript in your webpack projects. The code sample shows a webpack configuration that uses ts-loader to process files with .ts or .tsx extensions.
module.exports = {
mode: 'development',
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Integration with webpack's watch mode
ts-loader works seamlessly with webpack's watch mode, which recompiles your code when changes are detected. This feature is useful for development as it provides a fast feedback loop.
webpack --watch
Source map support
ts-loader supports the generation of source maps, which help in debugging by mapping the compiled code back to the original TypeScript source code. The code sample shows how to enable inline source maps in your webpack configuration.
module.exports = {
devtool: 'inline-source-map',
// ... other webpack configuration
};
Similar to ts-loader, awesome-typescript-loader is another TypeScript loader for webpack. It offers features like Babel integration and type checking in a separate process. However, it is no longer actively maintained, and users are recommended to switch to ts-loader or other alternatives.
While not a TypeScript-specific loader, babel-loader can be used in conjunction with @babel/preset-typescript to transpile TypeScript code. It is part of the Babel ecosystem and is often used for its broader transformation capabilities and plugin ecosystem.
esbuild-loader uses the esbuild bundler to transpile TypeScript (and other files) at a much faster rate than traditional loaders. It is known for its speed and efficiency, making it a strong alternative to ts-loader, especially in large projects where build time is a concern.
npm install ts-loader
module.exports = {
entry: './app.ts',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.js', '.ts']
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader?sourceMap&target=ES3' }
]
}
}
Specify the TypeScript output target.
Specify the type of modules that TypeScript emits.
Specify whether or not TypeScript emits source maps.
Advanced option to force files to go through different instances of the TypeScript compiler. Can be used to force segregation between different parts of your code. Can typically be ignored.
All declaration files should be resolvable from the entry file. The easiest way
to do this is to create a _references.d.ts
file which contains references to
all of your declaration files. Then reference _references.d.ts
from your
entry file.
_references.d.ts
///<reference path="path/to/declaration.d.ts" />
///<reference path="path/to/another/declaration.d.ts" />
app.ts
///<reference path="path/to/_references.d.ts" />
import MyClass = require('./MyClass');
...
Loading css and other resources is possible but you will need to make sure that
you have defined the require
function in a declaration file.
declare var require: {
<T>(path: string): T;
(paths: string[], callback: (...modules: any[]) => void): void;
ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};
Then you can simply require assets or chunks per the webpack documentation.
require('!style!css!./style.css');
Please see ts-jsx-loader
tsd reinstall
npm install
tsc index.ts --module commonjs
The MIT License (MIT)
Copyright (c) 2015 James Brantly
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
v0.2.1
FAQs
TypeScript loader for webpack
The npm package ts-loader receives a total of 5,906,572 weekly downloads. As such, ts-loader popularity was classified as popular.
We found that ts-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.