parceljs 零配置 typescript + react + less 基础环境

原创 y1j2x34 随笔 parcel 265阅读 15 天前 举报

项目初始化

创建并进入项目目录

初始化项目

安装依赖

首先是安装 parcel-bundler,更多关于parcel的信息请访问parcel官网

然后安装React和React types声明文件

关于声明文件的具体介绍可参考 Github上 的 DefinitelyTyped

其它开发依赖parcel-bundler会自动安装

添加TypeScript配置文件

接下来我们需要配置一个 tsconfig.json 来告诉 typescript 编译器如何编译代码。

在根目录创建 tsconfig.json 文件, 并添加如下内容:

<!--
TypeScript有三种jsx模式:preserve, reactreact-nativepreserve模式下生成的代码会保留jsx以供后续转换操作(Babel),输出会带有.jsx扩展名, react模式会生成 React.createElement, 后续不需要再进行转换,输出扩展名为:.js
-->

编写代码

首先创建目录:

src目录下添加index.html文件:

接下来在src下创建 index.tsx 文件:

以及 app.tsx 文件:

然后就是添加todo组件,在todo目录下新增 index.tsxindex.less

运行

先在 package.json 中添加脚本命令:

然后直接在项目根目录上执行npm start来运行项目。parceljs会根据资源类型自动安装所需的依赖,比如 less,typescript 等。

最终效果如图:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复