{"id":13385882,"url":"https://github.com/Microsoft/TypeScript-Babel-Starter","last_synced_at":"2025-03-13T10:31:24.607Z","repository":{"id":29156554,"uuid":"118187783","full_name":"microsoft/TypeScript-Babel-Starter","owner":"microsoft","description":"A sample setup using Babel CLI to build TypeScript code, and using TypeScript for type-checking. ","archived":true,"fork":false,"pushed_at":"2022-08-15T21:15:29.000Z","size":245,"stargazers_count":1994,"open_issues_count":27,"forks_count":225,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-03-13T01:22:04.570Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-19T22:54:29.000Z","updated_at":"2025-01-29T02:42:33.000Z","dependencies_parsed_at":"2022-08-28T05:31:20.565Z","dependency_job_id":null,"html_url":"https://github.com/microsoft/TypeScript-Babel-Starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2FTypeScript-Babel-Starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2FTypeScript-Babel-Starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2FTypeScript-Babel-Starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2FTypeScript-Babel-Starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microsoft","download_url":"https://codeload.github.com/microsoft/TypeScript-Babel-Starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243386079,"owners_count":20282688,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T11:01:21.294Z","updated_at":"2025-03-13T10:31:24.284Z","avatar_url":"https://github.com/microsoft.png","language":"TypeScript","readme":"# TypeScript-Babel-Starter\n\n# What is this?\n\nThis is a small sample repository that uses Babel to transform TypeScript to plain JavaScript, and uses TypeScript for type-checking.\nThis README will also explain step-by-step how you can set up this repository so you can understand how each component fits together.\n\nFor 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.\nSpecifically, we'll show off integration with Webpack for if you're deploying an application, and Rollup for if you're producing a library.\n\n# How do I use it?\n\n## Building the repo\n\n```sh\nnpm run build\n```\n\n## Type-checking the repo\n\n```sh\nnpm run type-check\n```\n\nAnd to run in `--watch` mode:\n\n```sh\nnpm run type-check:watch\n```\n\n# How would I set this up myself?\n\n## Install your dependencies\n\nEither run the following:\n\n```sh\nnpm install --save-dev typescript @babel/core @babel/cli @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-typescript\n```\n\nor make sure that you add the appropriate `\"devDependencies\"` entries to your `package.json` and run `npm install`:\n\n```json\n\"devDependencies\": {\n    \"@babel/cli\": \"^7.8.3\",\n    \"@babel/core\": \"^7.8.3\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.8.3\",\n    \"@babel/preset-env\": \"^7.8.3\",\n    \"@babel/preset-typescript\": \"^7.8.3\",\n    \"typescript\": \"^3.7.5\"\n}\n```\n\n## Create your `tsconfig.json`\n\nThen run\n\n```sh\ntsc --init --declaration --allowSyntheticDefaultImports --target esnext --outDir lib\n```\n\n**Note:** TypeScript also provides a `--declarationDir` option which specifies an output directory for generated declaration files (`.d.ts` files).\nFor our uses where `--emitDeclarationOnly` is turned on, `--outDir` works equivalently.\n\n## Create your `.babelrc`\n\nThen copy the `.babelrc` in this repo, or the below:\n\n```json\n{\n    \"presets\": [\n      \"@babel/preset-env\",\n      \"@babel/preset-typescript\"\n    ],\n    \"plugins\": [\n      \"@babel/plugin-proposal-class-properties\"\n    ]\n}\n```\n\n## Set up your build tasks\n\nAdd the following to the `\"scripts\"` section of your `package.json`\n\n```json\n\"scripts\": {\n    \"type-check\": \"tsc --noEmit\",\n    \"type-check:watch\": \"npm run type-check -- --watch\",\n    \"build\": \"npm run build:types \u0026\u0026 npm run build:js\",\n    \"build:types\": \"tsc --emitDeclarationOnly\",\n    \"build:js\": \"babel src --out-dir lib --extensions \\\".ts,.tsx\\\" --source-maps inline\"\n}\n```\n\n# How do I change it?\n\n## Using JSX (and React)\n\u003e Full example available [**here**](https://github.com/a-tarasyuk/react-webpack-typescript-babel)\n\n### Install your dependencies\n\nInstall the [@babel/preset-react](https://www.npmjs.com/package/@babel/preset-react) package as well as React, ReactDOM, and their respective type declarations\n\n```sh\nnpm install --save react react-dom @types/react @types/react-dom\nnpm install --save-dev @babel/preset-react\n```\n\n### Update `.babelrc`\n\nThen add `\"@babel/react\"` as one of the presets in your `.babelrc`.\n\n### Update `tsconfig.json`\n\nUpdate your `tsconfig.json` to set `\"jsx\"` to `\"react\"`.\n\n### Use a `.tsx` file\n\nMake sure that any files that contain JSX use the `.tsx` extension.\nTo get going quickly, just rename `src/index.ts` to `src/index.tsx`, and add the following lines to the bottom:\n\n```ts\nimport React from 'react';\nexport let z = \u003cdiv\u003eHello world!\u003c/div\u003e;\n```\n\n## Using Webpack\n\n\u003e Full example available [**here**](https://github.com/a-tarasyuk/webpack-typescript-babel)\n\n### Install your dependencies\n\n```sh\nnpm install --save-dev webpack webpack-cli babel-loader\n```\n\n### Create a `webpack.config.js`\n\nCreate a `webpack.config.js` at the root of this project with the following contents:\n\n```js\nvar path = require('path');\n\nmodule.exports = {\n    // Change to your \"entry-point\".\n    entry: './src/index',\n    output: {\n        path: path.resolve(__dirname, 'dist'),\n        filename: 'app.bundle.js'\n    },\n    resolve: {\n        extensions: ['.ts', '.tsx', '.js', '.json']\n    },\n    module: {\n        rules: [{\n            // Include ts, tsx, js, and jsx files.\n            test: /\\.(ts|js)x?$/,\n            exclude: /node_modules/,\n            loader: 'babel-loader',\n        }],\n    }\n};\n```\n\n### Create a build task\n\nAdd\n\n```json\n\"bundle\": \"webpack\"\n```\n\nto the `scripts` section in your `package.json`.\n\n### Run the build task\n\n```sh\nnpm run bundle\n```\n\n## Using Rollup\n\n\u003e Full example available [**here**](https://github.com/a-tarasyuk/rollup-typescript-babel)\n\n### Install your dependencies\n\n```sh\nnpm install --save-dev rollup @rollup/plugin-babel @rollup/plugin-node-resolve @rollup/plugin-commonjs\n```\n\n### Create a `rollup.config.js`\n\nCreate a `rollup.config.js` at the root of this project with the following contents:\n\n```js\nimport commonjs from '@rollup/plugin-commonjs';\nimport resolve from '@rollup/plugin-node-resolve';\nimport babel from '@rollup/plugin-babel';\nimport pkg from './package.json';\n\nconst extensions = [\n  '.js', '.jsx', '.ts', '.tsx',\n];\n\nconst name = 'RollupTypeScriptBabel';\n\nexport default {\n  input: './src/index.ts',\n\n  // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)\n  // https://rollupjs.org/guide/en#external-e-external\n  external: [],\n\n  plugins: [\n    // Allows node_modules resolution\n    resolve({ extensions }),\n\n    // Allow bundling cjs modules. Rollup doesn't understand cjs\n    commonjs(),\n\n    // Compile TypeScript/JavaScript files\n    babel({ extensions, include: ['src/**/*'] }),\n  ],\n\n  output: [{\n    file: pkg.main,\n    format: 'cjs',\n  }, {\n    file: pkg.module,\n    format: 'es',\n  }, {\n    file: pkg.browser,\n    format: 'iife',\n    name,\n\n    // https://rollupjs.org/guide/en#output-globals-g-globals\n    globals: {},\n  }],\n};\n\n```\n\n### Create a build task\n\nAdd\n\n```json\n\"bundle\": \"rollup -c\"\n```\n\nto the `scripts` section in your `package.json`.\n\n### Run the build task\n\n```sh\nnpm run bundle\n```\n\n## Using NodeJS\n\n\u003e Full example available [**here**](https://github.com/it-efrem/NodeJS-TypeScript-Babel)\n\n### Install your dependencies\n\n```sh\nnpm install --save-dev @babel/core @babel/node @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-typescript typescript\n```\n\n### Create a start task\n\nAdd\n\n```json\n\"start\": \"babel-node -x \\\".ts\\\" src/index.ts\"\n```\n\nto the `scripts` section in your `package.json`.\n\n### Run the start task\n\n```sh\nnpm run start\n```","funding_links":[],"categories":["TypeScript Starter/Boilerplate","目录"],"sub_categories":["英文资源"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMicrosoft%2FTypeScript-Babel-Starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMicrosoft%2FTypeScript-Babel-Starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMicrosoft%2FTypeScript-Babel-Starter/lists"}