开发库:babel、typescript、rollup、eslint、corejs。 由于目前只是发布一些函数方法,只需要一些兼容性工具,打包工具即可。 一、创建项目 可以直接在github上创建一个空项目,然后克隆到本地。 进入目录下,执行 1 npm init 之后将开始初始化package.json: This utility will walk you through creating a package.json...
新建 rollup.config.js 配置文件：import typescript from '@rollup/plugin-typescript'; // 让 rollup 认识 ts 的代码import pkg from './package.json';// 为了将引入的 npm 包，也打包进最终结果中import resolve from 'rollup-plugin-node-resolve';import commonjs from '@rollup/plugin-commonjs';//...
touch rollup.config.js 然后在rollup.config.js中增加以下内容: import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import typescript from 'rollup-plugin-typescript'; import pkg from './package.json'; export default { input: 'src/index.ts', // ...
Button.tsx 如果您熟悉 React 和 TypeScript,那么这里没有什么是新的。 但如果你不是,我们需要在这里使用@types,告诉 TypeScript 这个 Button 是什么——一个 React 功能组件。 因此,我们将类型指定为 Button: React.FC<ButtonType> 以及组件将接收的道具的类型,即 ButtonType 。 Button.types.ts 在这里,我们再...
config.js COPY 其中,dist 目录一般是通过 Rollup 等打包器打包后的入口文件,一般具有多种格式,以不同后缀命令,如: index.cjs.js index.esm.js。lib 和 esm 目录可以是 TypeScript 编译后生成的文件,目录下的结构基本和原项目结构相同,只是后缀变为 js,lib 一般为 CommonJS 格式,esm 为 ESModule 格式。而...
用TypeScript 开发手势库 - (3)统一化Mouse和Touch事件 标题有点长 今天的标题有点长, 但不难, 讲的都是工具配置和使用, 就3个知识点: 1. 如何配置tsconfig.json 2. 如何配置rollup.config.js 3. 使用npx运行项目所在node_modules的命令 rollup.config.js ...
配置rollup.config.js文件 importtypescriptfrom'rollup-plugin-typescript';exportdefault{input:'./main.ts',plugins:[typescript(),// 会自动读取 文件tsconfig.json配置]} 引入babel,转换js新方法使得浏览器可用 安装babel 插件 npm install @babel/preset-typescript @babel/preset-react @babel/preset-env -D...
好的,现在一切都设置好了,我们可以专注于创建我们的第一个 typescript 组件。 首先在项目的根目录下创建一个 .src。 这将是您图书馆的档案。 确保此文件夹中的所有代码都在 TypeScript 中,并且是您要共享的内容的一部分。 请注意, src 将保存您的库,而 storybook 将保存您的故事书文件。 当你去发布你的图...
打包typescript项目 注意有坑--网上教程大多数写的使用rollup-plugin-typescript,但rollup-plugin-typescript使用后存在各种问题 rollup-plugin-replace 替换待打包文件里的一些变量 rollup-plugin-uglify 压缩包 只支持es5 不支持es6 + rollup-plugin-terser