create-ts-lib
Quick Start
You can execute the create-ts-lib CLI using npx or by installing it globally with npm i -g create-ts-lib.
# Use NPX or npm install -g create-ts-lib to install it as a global package
npx create-ts-lib@latest my-typescript-lib
cd my-typescript-lib && npm start
Build and Serve it
- Browse http://localhost:3000/ to see your bootstrapped module.
- A bundle is created under
/distfolder. - Create a minified bundle with
npm run build.
Features
You don’t need to install or configure tools like Webpack, Typescript, Karma or Jasmine.
They are preconfigured so that you can focus on the code, but as a starter kit you still can modify all the configuration files.
- (Application Type) Typescript 3
- (Bundler) Webpack 4
- Karma, Jasmine
Create a Typescript project
# Use NPX or npm install -g create-ts-lib to install it as a global package
npx create-ts-lib@latest my-typescript-lib
cd my-typescript-lib && npm start
Calling create-ts-lib with my-typescript-lib as an argument creates a directory my-typescript-lib inside the current directory.
Inside that directory, the initial file structure of the project is generated with all the devDependencies installed.
my-typescript-lib
├── node_modules
├── src
│ └── index.html
│ └── index.ts
│ └── MyLibrary.ts
│ └── MyLibrary.spec.ts
├── tests
│ └── unit
│ └── spec-bundle.js
├── README.md
├── package.json
├── .gitignore
├── karma.conf.js
├── tsconfig.json
├── tslint.json
└── webpack.config.js
No configuration or complicated folder structures, just the files you need to start your app / package / module.
npm start or npm run server:prod
Runs the app in development / production mode using Webpack dev server.Open http://localhost:3000
npm test
Runs the unit tests using Karma as test runner and Jasmine as testing framework.
npm run build or npm run build:prod
Creates a bundle into the dist folder:
dist
├── MyLibrary.d.ts # - Example of a 'd.ts' declaration file
├── app.bundle.js # - Main bundle of the application. name from webpack.config
├── app.bundle.js.map # - Sourcemap
├── index.d.ts
└── index.html # - html page referencing app.bundle.js
Development
We'd love to have your helping hand on create-ts-lib! See CONTRIBUTING.md for more information on what we're looking for and how to get started.
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Backers
Thank you to all our backers!
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
-
1. 初始化项目 # 创建文件夹 mkdir part3 # 进入文件夹 cd part3 # 使用npm初始化 npm init # 加载相关依赖 ts-loader用于在webpack中编译ts文件 cnpm i -D webpack webpack-cli typescript ts-loader 2. 创建webpack配置 创建一个webpack.config.js文件 // 引入一个
-
react+webpack4+typescript搭建项目 公司项目打算从vue框架转成react,所以自学了下如何用webpack4搭建react+typescript的项目，虽说有脚本架create-react-app直接搭建，公司大佬也正在自己封装属于自己的脚本架，但是这里我想从0到1的自己搭建学习搭建一下(适合新手学习下): 一：首先安装最新的webpack npm install -D
-
第一章 快速入门 0、TypeScript简介 TypeScript是JavaScript的超集。 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。 TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。 TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查
-
1、初始化项目 npm init -y 2、下载构建工具 npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin webpack 构建工具webpack webpack-cli webpack的命令行工具 webpack-dev-server webpack的开发服务器 ty
-
使用webpack编译Typescript typescript安装 初始化工程 1、创建工程空目录Test 2、进入Test目录 3、使用npm初始化工程 npm init 4、创建webpack.config.js文件 5、创建tsconfig.json文件 安装typescript npm install typescript --save-dev 安装ts-loader npm insta
-
TypeScript打包 webpack整合 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包； TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS； 步骤如下： 初始化项目 进入项目根目录，执行命令 npm init -y，创建package.json文件 下载构建工具 命令如下： npm i -D webpack webpack-cli we
-
1，安装typescript相关依赖文件 npm install --save-dev typescript ts-loader @types/react @types/react-dom 2，创建tsconfig.json文件 在项目根目录下创建 tsconfig.json文件，先写几个简单的配置选项 { "compilerOptions": { "module": "es6",
-
对于复杂或多人开发的 React 项目来说，管理和使用每个组件的 props 、 state 或许会成为一件让人头痛的事情，而为每一个组件写文档，成本也会比较大，对项目的开发效率也不是最理想的。 Typescript 给 React 带来很多好处： 在组件头部定义 interface，让每个人在拿到组件的第一时间就可以很明确知道该组件需要使用的 props 和 state； 在编译中发现问题，减少
-
typescript的webpack编译 初始化 npm init -y // 生成package.json 安装webpack依赖 npm i -D webpack webpack-cli typescript ts-loader npm i -D html-webpack-plugin npm i -D webpack-dev-server npm i -D clean-webpack-plu
-
一、TypeScript TypeScript 是 JavaScript 类型的超集，它能够被转换为普通的 JavaScript。为了在 webpack cli 中使用 ts ，需要安装特定的 loader 来转换 ts 语法。 1.1 依赖安装 npm install typescript ts-loader -D 1.2 webpack.config.js const path = requi
-
webpack - TypeScript配置 TypeScirpt是微软开源的一款语言，它是javascript的超集，可以编译成javascript。 当构建大型项目的时候，使用ts可以极大的提高开发效率。 下面是使用构建工具webpack配置typescript的介绍。 typescript开发环境搭建 通过npm init初始化一个项目， 使用npm install --save-dev t
-
通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。 步骤： 1.初始化项目 - 进入项目根目录，执行命令 npm init -y - 主要作用：创建package.json文件 2.下载构建工具 npm i -D webpack webpack-cli webpack-
-
React Webpack Typescript Starter Minimal starter with hot module replacement (HMR) for rapid development. React (17.x) Webpack (5.x) Typescript (4.x) Hot Module Replacement (HMR) (React Hot Loader) Pr
-
Webpack 5 boilerplate Webpack 5 boilerplate with support of most common loaders and modules: babel typescript (using ForkTsCheckerWebpack ) sass, less, css modules with automatic typescript declaratio
-
问题内容： 我正在开发一个 React 应用程序并使用 Webpack 和 Typescript 。我想在标签之一中使用图片。但是，我没有找到访问图像文件的正确方法。 webpack.config.js ： app.tsx ： 运行应用程序时，找不到资源。 问题答案： 或者，在您的custom_typings文件夹中（如果有的话），可以添加一个新文件： 因此，您可以使用以下命令导入图像： 另外，正
-
当node_module库导入索引文件时，webpack为什么不在构建中包含这些库？ webpack对我来说仍然是一种黑色的艺术，我还没有完全掌握，所以下面是我试图实现的一个解释。 我正在构建一个测试应用程序，以在AWS Lambda节点服务器上作为无服务器代码运行。目标是通过在服务器上有一个或多个块并且没有node_modules文件夹，使部署包尽可能小。 我正在用TypescriptV3编写文
-
我不知道如何正确地连接这个插头，有人能帮助我吗？ webpack.config.js如下所示；https://gist.github.com/marcingolenia/2fa78ed2cd42f9294da5edd22d351245 我希望这条线能解决问题；
-
我目前正在为一家公司构建一个Vue UI组件库，在这个过程中，我使用webpack作为默认绑定程序。我想把整个项目构建成一个npm包，然后可以通过一个私有的git包存储库分发。包分发已经启动并运行，但我似乎无法以正确的方式导出组件，以便在另一个项目中使用。 使用的不同工具的版本： 国家预防机制：6.14.4 节点：12.17.0 纱线：1.22.0 @VUE/CLI:4.4.1 TSC:3.9.5