Typescript support

Install dependencies
``
npm i typescript ts-loader -D
`
webpack configuration in webpack.config.js
`
// ts loader for typescript
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
resolve: {
extensions: [
//required for ts imports
".tsx", ".ts",
//required for js imports (mostly in webpack dev self dependency)
'.js']
}
`

Less support

Install dependencies
`
npm i less less-loader css-loader style-loader -D
`
Create tsexternals.d.ts with following content
`
declare module '*.less'
`
tsconfig configurations
`
"includes" : ["./tsexternals.d.ts"],
`
webpack configurations.
`
// less support for project
// chain less -> css loader (module support) -> style loader (inject styles tag into DOM)
{
test: /\.less$/,
include: [path.join(__dirname, "/src")],
use: [
{loader: "style-loader"},
{
loader: "css-loader",
options: {
sourceMap: true,
modules: true,
localIdentName: "[local]___[hash:base64:5]"
}
},
{loader: "less-loader"}
]
},
`

Antd support

Install dependencies
`
npm i @voplus/antd ts-import-plugin -D
`
webpack configurations
`
// Add following to beginning of webpack.config.js
const tsImportPlugin = require('ts-import-plugin');

// Add following options to ts-loader rules
options:
{
getCustomTransformers: () => ({
before: [ tsImportPlugin({
libraryDirectory: 'es',
libraryName: '@voplus/antd',
style: true})
]})
}

// As antd does not support css module (https://segmentfault.com/q/1010000011170368)
// Add following additional less loader
// less support for antd
// javascriptEnabled are required for antd
{
test: /\.less$/,
include: [path.join(__dirname, "/node_modules/@voplus/antd")],
use: [
{loader: "style-loader"},
{loader: "css-loader"},
{loader: "less-loader", options: { javascriptEnabled: true}}
]
}
`

Override antd style reference
https://stackoverflow.com/questions/44817981/how-to-override-antd-style-with-dva

Theme

$3

modify '/src/style/theme.js'

$3

modular css/less will generate a unique class name and make it difficult to override antd class styles.
We can use :global to overcome this. Code below demonstrated how to do this.

`
// Less
.componentClass {
:global {
//override ant styles under componentClass
.ant-btn-primary {
background-color: @success-color;
}
}
}
`
`
// TS

Button display with success color instead of primary color.

`

Test Setup

https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f

"skipBabel" must set to true if allowSyntheticDefaultImports is true in tsconfig.json. Otherwise debugging with VSCode will have source map issues.
5 Dec 2018 : The above seems no longer needed after updated ts-jest.

Library Build

Modify package.json
`
"main": "lib/index.js",
"build" : "webpack --config webpack.prod.js && tsc --outDir lib"
`

Modify tsconfig.json
1. Remove "allowJs"
2. Add "declaration" : true

Knowledges

test

[28 Jul 2018]
* jest skipBabel need set to true otherwise will have strange sourcemap issues.
* tsconfig need following configuration otherwise awync await may not work
"target": "es6",
"allowSyntheticDefaultImports":false,
"esModuleInterop":false

MacOS build时 cpx命令需要给文件目录加上引号
`shell
"copy-less": "cpx 'src//.less' lib && cpx 'src//.less' es && cpx 'src/*/.css' es",
``