用Webpacker来实现React + TypeScript

10 月 ago

逸, 科

2 minutes

在本文中，我们将介绍如何在Rails上通过Webpacker启用TypeScript，并构建React + TypeScript开发环境。

环境

Rails5.1.4、Webpacker 3.0.2、TypeScript 2.6.1。

操作步骤

安装Webpacker

gem 'webpacker', '~> 3.0'

$ bundle install 
$ bundle exec rails webpacker:install
$ bundle exec rails webpacker:install:react

安裝TypeScript相關的套件

$ yarn add ts-loader typescript @types/react @types/react-dom

@types/react, @types/react-dom => react, react-dom の型定義ファイル。

创建tsconfig.json文件

在tsconfig.json中定义TypeScript的编译器选项。
在项目根目录下运行以下命令，将创建tsconfig.json。

$ node_modules/typescript/bin/tsc --init

作为最低设定，我们启用以下选项。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true
  }
}

compilerOptionsの詳細については、こちらを参照してください。

使Webpacker能够处理.tsx文件。

在 config/webpacker.yml 文件的 extensions 中添加扩展名 [.tsx]。

  # 省略
  extensions:
    - .coffee
    - .erb
    - .js
    - .jsx
    - .ts
    - .tsx # 追加

自己的备忘录：webpack的resolve.extensions选项用于自动解析在模块导入时指定的扩展名。查看源代码以确认Webpacker如何解释这个设置。

设置已经完成！

我們立即使用 `webpacker:install:react` 任務自動生成的 `hello_react.js` 檔案，用 TypeScript 進行重寫。

import * as React from "react"
import * as ReactDOM from "react-dom"

interface HelloProps {
  name: string;
}

const Hello: React.SFC<HelloProps> = (props) => (
  <div>Hello {props.name}!</div>;
)

Hello.defaultProps = {
  name: "David",
}

document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement("div")),
  )
})

当在 View 中执行<%= javascript_pack_tag “hello_react” %>时，可以查看结果。

也许光凭这句话并不能很好地传达出 TypeScript 的强大之处… 但是，如果你正在开发相当规模的应用程序，仅仅定义 props 的类型就能带来相当多的好处。

尝试更改TypeScript的加载程序

这次我们使用了 ts-loader 作为 TypeScript 的加载器，但当然，TypeScript 的加载器不仅仅是 ts-loader。
试一下，我们来切换到 awesome-typescript-loader。

（有关 at-loader 和 ts-loader 的区别，请参考此处。）

设置非常简单，只需要在Webpacker的配置文件中，覆盖node_modules/@rails/webpacker/package/loaders/typescript.js文件的设置。

const environment = require('./environment')

// 追加
environment.loaders.set('typescript', {
  test: /\.tsx?$/,
  use: 'awesome-typescript-loader'
})
// 追加ここまで

module.exports = environment.toWebpackConfig()

总结

Webpacker是一个非常棒的产品，让你可以轻松地使用TypeScript编写React（当然也包括Vue和Angular）应用程序，而无需担心繁琐的配置。

不管是想尝试 TypeScript 的人（当然，还包括想制作大规模单页应用的人！），首先可以尝试在 Rails 上小规模开始，这样会很好。