第一个应用
本文将带你一步一步地实现一个最简单的“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.x和NPM 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 start和npm 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应用，在后续章节我们会慢慢展开讲解更深入的应用开发模式。