Skip to main content

第一个应用

本文将带你一步一步地实现一个最简单的“Hello World”应用。

初始化项目

你也可以用@reskript/init来初始化项目,以下为手动初始化的过程,着眼于帮助你了解reSKRipt的相关依赖和工作过程。

你需要将一个目录转为一个标准的NodeJS项目,即需要package.json

mkdir my-app
cd my-app
npm init -y

安装依赖

作为一个简单的应用,我们假设需要使用构建、本地调试、代码检查这几项功能,参考快速上手将相关的依赖安装上:

npm install -D eslint stylelint typescript webpack
npm install -D -E @reskript/cli @reskript/cli-build @reskript/cli-dev @reskript/cli-lint @reskript/config-lint
note

你可能注意到了,我们安装@reskript/*包的时候使用了-E参数,这能保证我们对reSKRipt的依赖被锁定在固定的版本上。请注意在将来升级版本时,保持它们的版本是完全一致的。

另请注意:NodeJS 16.xNPM 7.x现在还不能完全兼容地安装这些依赖,你可能需要切换到NodeJS 14.x,可以考虑使用nvm来管理你的NodeJS版本。

当然需要使用react进行开发,必要的框架也是不可少的:

npm install core-js react react-dom
npm install -D @types/react @types/react-dom

准备一些配置文件

代码检查

在项目目录下创建一个.eslintrc.cjs,内容如下:

module.exports = {
extends: require.resolve('@reskript/config-lint/config/eslint'),
};

再增加一个stylelint.config.cjs,内容如下:

module.exports = {
extends: require.resolve('@reskript/config-lint/config/stylelint'),
};

可以阅读代码检查来了解各个配置文件的作用。

TypeScript配置

我们想用TypeScript来编写源码,因此在项目目录下再增加一个tsconfig.json,内容可以简单如下:

{
"include": [
"src",
"./*.ts"
],
"compilerOptions": {
"module": "esnext",
"target": "esnext",
"outDir": "dist",
"noEmit": true,
"jsx": "react-jsx",
"esModuleInterop": true,
"moduleResolution": "node",
"strict": true,
"noUnusedLocals": false,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"keyofStringsOnly": true,
"skipLibCheck": true,
"paths": {
"@/*": ["./src/*"]
}
}
}

浏览器兼容性配置

在项目根目录增加一个.browserslistrc文件,这个文件用来声明你需要兼容的浏览器,像babel等工具都会参考这个文件,我们随便填一些:

chrome 76
firefox 64

以上是一个比较精简可用的配置,使用emit: false可以让TypeScript不要去处理代码的生成,获得更好的类型检查的性能。

项目配置

在项目目录下创建一个reskript.config.ts文件,简单地填空如下内容:

import {configure} from '@reskript/settings';

export default configure(
'webpack',
{
build: {
appTitle: '我的第一个应用',
},
devServer: {
port: 8081,
},
}
);

你可以通过配置文件来了解更多的配置信息。

编写入口代码

reSKRipt的一大特点是将所有的应用入口放在了src/entries目录下,所以你现在的目录结构大致是这样的:

/src
/entries
index.tsx # 主入口文件
.eslintrc.cjs
.stylelint.config.cjs
webpack.config.js
reskript.config.ts
package.json
package-lock.json

建立src/entries/index.tsx,并输入以下代码:

import {render} from 'react-dom';

function App() {
return <h1>Hello World</h1>;
};

render(
<App />,
document.body.appendChild(document.createElement('div'))
);

配置脚本

打开package.json,找到scripts这个属性,替换为以下内容:

{
"scripts": {
"start": "skr dev",
"build": "skr build --clean",
"lint": "skr lint",
"lint-staged": "skr lint --staged --fix --auto-stage"
}
}

这样可以让你快速地使用npm startnpm run build来执行脚本,当然你可以在后续灵活地调整这里的参数和脚本内容。

运行应用

简单地把应用跑起来看看:

npm start

在短暂的等待后,你将看到浏览器自动打开了http://localhost:8081这个地址,页面上出现了“Hello World”字样。同时在命令行上看到一些漂亮的信息:

 DONE  Compiled successfully in 1608ms

I Your application is running here: http://localhost:8081/

这说明一个最简单的应用已经成功了,我们可以在完全不接触webpack之类工具的前提下快速地实现一个React应用。

构建应用

最后我们再来试一下把代码构建成可上线的产物:

npm run build

等待一段时间,任务完成后,你可以看到一个dist目录,简单看下里面的内容:

dist
├── assets
│   ├── index.2585d1c3d8714afc2ec0.js
│   ├── index.2585d1c3d8714afc2ec0.js.LICENSE.txt
│   └── index.2585d1c3d8714afc2ec0.js.map
└── index-stable.html

我们最终产出的入口页面是index-stable.html,名字有些不那么常见,你可以从特性矩阵了解源由。而dist/assets中则是所有的静态资源,资源都会带上哈希来提供长效缓存的支持。

总结

截止此刻,我们用约5分钟的时间(假设你复制粘贴够熟练)快速地运行了一个简单的React应用,在后续章节我们会慢慢展开讲解更深入的应用开发模式。