react storybook使用typescript
在前面的文章有介紹在storybook中使用antd 。
之前開發js是使用的flow來作型別檢查，最近想嘗試一下typescript。
如果是從頭建立一個空的typescript專案則相對就比較簡單，但是現在我們是需要將之前的create-react-app專案遷移到typescript。
在create-react-app中新增typescript
參考https://facebook.github.io/create-react-app/docs/adding-typescript
react-scripts從2.1.0版本開始就支援typescript了，這裡我們先將專案的react-scripts依賴升級到最新版本：
yarn add --exact [email protected]
然後再新增typescript依賴：
yarn add typescript @types/node @types/react @types/react-dom @types/jest
然後將src/index.js
更名為src/index.tsx
接著建立tsconfig.json
檔案：
{
"compilerOptions": {
"module": "esnext",
"target": "es5",
"lib": ["es5", "es6", "es7", "es2017", "dom"],
"sourceMap": true,
"allowJs": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"skipLibCheck": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve"
},
"include": [
"src/**/*"
]
}
在storybook中新增typescript
參考https://storybook.js.org/docs/configurations/typescript-config/
同樣也先將storybook升級到最新版：
yarn add --dev --exact @storybook/[email protected] @storybook/[email protected]
然後再新增依賴：
yarn add --dev awesome-typescript-loader @types/storybook__react @storybook/addon-info react-docgen-typescript-webpack-plugin ts-jest
接著修改webpack配置，對應.storybook/webpack.config.js
檔案：
const path = require("path");
const antdTheme = {
'@primary-color': '#846bc1',
}
module.exports = ({ config, mode }) => {
config.module.rules.push({
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader",
options: {
modifyVars: antdTheme,// 如果要自定義主題樣式
javascriptEnabled: true
}
}]
});
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('awesome-typescript-loader'),
options: { configFileName: path.resolve(__dirname, './tsconfig.json') }
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};
以及babel配置，對應.storybook/babelrc.js
檔案：
module.exports = function(api) {
api.cache.forever();
return {
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"targets": {
"browsers": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 11"
]
}
}
],
"@babel/preset-react"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
}
同時修改storybook配置.storybook/config.js
，讓其支援.tsx檔案：
將之前的：
const req = require.context('../src/components', true, /\.stories\.js$/)
修改為：
const req = require.context('../src/components', true, /\.stories\.[jt]sx?$/)
最後再建立.storybook/tsconfig.json
檔案：
{
"extends": "../tsconfig",
"compilerOptions": {
"jsx": "react",
"isolatedModules": false,
"noEmit": false
}
}
至此一切都完成了。
執行storybook時若出現錯誤：Error: Cannot find module '@emotion/core/package.json'
，則手動安裝一下：yarn add --dev @emotion/core