自從使用了Angular以後,今後入了Typescript的坑。當再次選擇react時,就選擇了基於react官方腳手架構建工具create-react-app的ts實現,即create-react-app-typescript。javascript
使用起來很是簡單,幾個命令便可:css
# create-react-app npm i -g create-react-app # 構建項目 create-react-app react-example --scripts-version=react-scripts-ts # 啓動 cd react-example npm start
OK, done!java
react-app-rewired是一個對create-react-app
進行自定義配置的社區解決方案,能夠在不 eject
的情條件下對create-react-app
進行高級配置。node
npm i react-app-rewired -D
而後在package.json更改啓動配置,更改成:react
/* package.json */ "scripts": { "start": "react-app-rewired start --scripts-version react-scripts-ts", "build": "react-app-rewired build --scripts-version react-scripts-ts", "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts", }
而後在項目的根目錄在建立 config-overrides.js
,在這裏,經過配置實現如下功能:git
// config-overrides.js const tsImportPluginFactory = require('ts-import-plugin') const { getLoader } = require("react-app-rewired"); const rewireLess = require('react-app-rewire-less'); const fs = require('fs'); const path = require('path'); module.exports = function override(config, env) { const tsLoader = getLoader( config.module.rules, rule => rule.loader && typeof rule.loader === 'string' && rule.loader.includes('ts-loader') ); // ts-import-plugin tsLoader.options = { getCustomTransformers: () => ({ before: [tsImportPluginFactory({ libraryName: 'antd', libraryDirectory: 'es', style: 'true', })] }) }; // antd自定義主題 config = rewireLess.withLoaderOptions({ modifyVars: { "@primary-color": "#1DA57A" }, })(config, env); // less-modules/自動添加css前綴 config.module.rules[1].oneOf.unshift( { test: /\.less$/, exclude: /node_modules|antd\.less/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, minimize: true, modules: true, localIdentName: '[local]___[hash:base64:5]' } }, { loader: require.resolve('postcss-loader'), options: { ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9' ], flexbox: 'no-2009' }) ] } }, { loader: require.resolve('less-loader') } ] } ); return config; }
至此,關於基本環境搭建的內容完畢。github
react揚帆啓航專欄分享的時我我的學習與實踐react過程當中的一些歷程,但願藉此專欄與你們共同探討react相關的技術,以求進步。typescript