1. 首页
  2. IT资讯

React + TypeScript + Less

What ? Why ? How ?

React is a JavaScript library for building user interfaces.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Less is CSS, with just a little more.

抱歉偷一下小懒,用三家官网的引言诠释了 What. 至于 Why 的部分React 和 Less 所能带来的组件化开发模式、CSS函数等与良好的开发社区已无须我在此多言。

TypeScript (此后简称TS) 在此我还是有必要一提,我知道其实蛮多人讨厌 TS 所带来的复杂类型限定和相对严格的检查环境。但是事实上必要接口处严格的检查更有利于保持代码更好的成长,尤其是在 React + Redux 下庞大的数据需要维护往往搞得后期焦头烂额。其次通过 TS 提供的 接口来取代 React 严格模式下的 PropsType 更能节省不少开发时间。

除上文以外,我在此也不想再大书特书来争论各大框架之间的优劣。该文纯为了那些向我抱怨各大问答网站上长篇大书同时说得不清不楚的环境搭建罢了。

How

  1. 首先你需要 下载 | Node.js 中文网。

2. 然后是打开终端安装 create-react-app

$ npm install -g create-react-app

install, -g 请自行理解。create-react-app 用于帮助你快速的创建 react 应用。有点像搭房子用的脚手架。

3. 接着是创建应用

$ create-react-app 应用名 --scripts-version=react-scripts-ts

–scripts-version=react-scripts-ts 是用于输出 TS 项目,如果没有就是普通的 React 项目。

至此 React + TypeScript 已基本完成。

5. 最后是加入 Less

请将你的终端目录切换到刚刚创建应用根目录下,然后输入以下命令:

$ npm run eject

Eject ? 不用怀疑,我不知道为什么他们会选用这个词汇。难道是程序员的恶趣味。(好吧!说这句废话只是为了让你对这个命令印象深刻)

接着是安装 Less

$ npm install --save-dev less less-loader

然后打开刚刚 Eject 的 config 文件夹下修改 webpack.config.*.js 文件。按照程序员的惯例,大多数回答都不会告诉你这个config到底是哪个config。甚至连 Eject 那一步也不会说,他们通常都是默认你完全掌握怎么修改的情况下来教你怎么修改的。所以在此我也保持程序员的惯例。不过我还是可以给个提示机会,用 VSCode 的在文件中查找功能。

{   test: /.css$/,   use: [     require.resolve('style-loader'),     {       loader: require.resolve('css-loader'),       options: {         importLoaders: 1,       },     }, ... }  // 把上面的部分变成下面  {   test: /.css|.less$/,   use: [     require.resolve('style-loader'),     {       loader: require.resolve('css-loader'),       options: {         importLoaders: 1,       },     },     {       loader: require.resolve('less-loader'),       options: {         importLoaders: 1,       },     }, ... } 

End

Thx. 不过你知道文中的 … 是此处省略一万字吧 ?

原文始发于:React + TypeScript + Less

主题测试文章,只做测试使用。发布者:酒颂,转转请注明出处:http://www.cxybcw.com/25295.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code