This is a small sample repository that uses Babel to transform TypeScript to plain JavaScript, and uses TypeScript for type-checking. This README will also explain step-by-step how you can set up this repository so you can understand how each component fits together.
For simplicity, we've used babel-cli with a bare-bones TypeScript setup, but we'll also demonstrate integration with JSX/React, as well as adding bundlers into the mix.
Specifically, we'll show off integration with Webpack for if you're deploying an application, and Rollup for if you're producing a library.
npm run buildnpm run type-checkAnd to run in --watch mode:
npm run type-check:watchEither run the following:
npm install --save-dev typescript @babel/core @babel/cli @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-typescriptor make sure that you add the appropriate "devDependencies" entries to your package.json and run npm install:
"devDependencies": {
"@babel/cli": "^7.8.3",
"@babel/core": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"@babel/preset-typescript": "^7.8.3",
"typescript": "^3.7.5"
}Then run
tsc --init --declaration --allowSyntheticDefaultImports --target esnext --outDir libNote: TypeScript also provides a --declarationDir option which specifies an output directory for generated declaration files (.d.ts files).
For our uses where --emitDeclarationOnly is turned on, --outDir works equivalently.
Then copy the .babelrc in this repo, or the below:
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}Add the following to the "scripts" section of your package.json
"scripts": {
"type-check": "tsc --noEmit",
"type-check:watch": "npm run type-check -- --watch",
"build": "npm run build:types && npm run build:js",
"build:types": "tsc --emitDeclarationOnly",
"build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline"
}Full example available here
Install the @babel/preset-react package as well as React, ReactDOM, and their respective type declarations
npm install --save react react-dom @types/react @types/react-dom
npm install --save-dev @babel/preset-reactThen add "@babel/react" as one of the presets in your .babelrc.
Update your tsconfig.json to set "jsx" to "react".
Make sure that any files that contain JSX use the .tsx extension.
To get going quickly, just rename src/index.ts to src/index.tsx, and add the following lines to the bottom:
import React from 'react';
export let z = <div>Hello world!</div>;Full example available here
npm install --save-dev webpack webpack-cli babel-loaderCreate a webpack.config.js at the root of this project with the following contents:
var path = require('path');
module.exports = {
// Change to your "entry-point".
entry: './src/index',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json']
},
module: {
rules: [{
// Include ts, tsx, js, and jsx files.
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
loader: 'babel-loader',
}],
}
};Add
"bundle": "webpack"to the scripts section in your package.json.
npm run bundleFull example available here
npm install --save-dev rollup @rollup/plugin-babel @rollup/plugin-node-resolve @rollup/plugin-commonjsCreate a rollup.config.js at the root of this project with the following contents:
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import pkg from './package.json';
const extensions = [
'.js', '.jsx', '.ts', '.tsx',
];
const name = 'RollupTypeScriptBabel';
export default {
input: './src/index.ts',
// Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
// https://rollupjs.org/guide/en#external-e-external
external: [],
plugins: [
// Allows node_modules resolution
resolve({ extensions }),
// Allow bundling cjs modules. Rollup doesn't understand cjs
commonjs(),
// Compile TypeScript/JavaScript files
babel({ extensions, include: ['src/**/*'] }),
],
output: [{
file: pkg.main,
format: 'cjs',
}, {
file: pkg.module,
format: 'es',
}, {
file: pkg.browser,
format: 'iife',
name,
// https://rollupjs.org/guide/en#output-globals-g-globals
globals: {},
}],
};Add
"bundle": "rollup -c"to the scripts section in your package.json.
npm run bundleFull example available here
npm install --save-dev @babel/core @babel/node @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-typescript typescriptAdd
"start": "babel-node -x \".ts\" src/index.ts"to the scripts section in your package.json.
npm run start
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent