- React Cookbook
- Carlos Santana Roldan
- 466字
- 2021-07-16 17:49:33
How to do it...
We'll now see the most common problems using Windows for development:
- Terminal: The first problem you will face is to use the Windows terminal (CMD) because it does not support Unix commands (like Linux or Mac). The solution is to install a Unix Terminal; the most highly recommended is to use the Git Bash Terminal, which is included with Git when you install it (https://git-scm.com), and the second option is to install Cygwin, which is a Linux Terminal in Windows (https://www.cygwin.com).
- Environment variables: Another common problem using Windows is to set environment variables. Generally, when we write npm scripts, we set environment variables such as NODE_ENV=production or BABEL_ENV=development, but to set those variables in Windows, you use the SET command, which means you need to do SET NODE_ENV=production or SET BABEL_ENV=development. The problem with this is that if you are working with other people that use Linux or Mac, they will have problems with the SET command, and probably you will need to ignore this file and modify it only for your local environment. This can be tedious. The solution to this problem is to use a package called cross-env; you can install it by doing npm install cross-env, and this will work in Windows, Mac, and Linux:
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --
mode development --open",
"start-production": "cross-env NODE_ENV=production webpack-dev-
server --mode production"
}
- Case-sensitive files or directories: In reality, this also happens on Linux, but sometimes it is very difficult to identify this problem, for example, if you create a component in the components/home/Home.jsx directory but in your code you're trying to import the component like this:
import Home from './components/Home/Home';
Normally, this won't cause any problems on Mac but can generate an error on Linux or Windows because we are trying to import a file with a different name (because it's case-sensitive) into the directory.
- Paths: Windows uses a backslash (\) to define a path, while in Mac or Linux they use a forward slash (/). This is problematic because sometimes we need to define a path (in Node.js mostly) and we need to do something like this:
// In Mac or Linux
app.use(
stylus.middleware({
src: __dirname + '/stylus',
dest: __dirname + '/public/css',
compile: (str, path) => {
return stylus(str)
.set('filename', path)
.set('compress', true);
}
})
);
// In Windows
app.use(
stylus.middleware({
src: __dirname + '\stylus',
dest: __dirname + '\public\css',
compile: (str, path) => {
return stylus(str)
.set('filename', path)
.set('compress', true);
}
})
);
// This can be fixed by using path
import path from 'path';
// path.join will generate a valid path for Windows or Linux and Mac
app.use(
stylus.middleware({
src: path.join(__dirname, 'stylus'),
dest: path.join(__dirname, 'public', 'css'),
compile: (str, path) => {
return stylus(str)
.set('filename', path)
.set('compress', config().html.css.compress);
}
})
);
推薦閱讀
- 連接未來(lái):從古登堡到谷歌的網(wǎng)絡(luò)革命
- Mastering Machine Learning for Penetration Testing
- 網(wǎng)管員典藏書(shū)架:網(wǎng)絡(luò)管理與運(yùn)維實(shí)戰(zhàn)寶典
- 計(jì)算機(jī)網(wǎng)絡(luò)與數(shù)據(jù)通信
- React:Cross-Platform Application Development with React Native
- Wireshark網(wǎng)絡(luò)分析就這么簡(jiǎn)單
- 物聯(lián)網(wǎng)與無(wú)線(xiàn)傳感器網(wǎng)絡(luò)
- Getting Started with Grunt:The JavaScript Task Runner
- 網(wǎng)絡(luò)基礎(chǔ)與網(wǎng)絡(luò)管理項(xiàng)目化教程
- SAE原理與網(wǎng)絡(luò)規(guī)劃
- 端到端QoS網(wǎng)絡(luò)設(shè)計(jì)
- 物聯(lián)網(wǎng)工程概論
- Hands-On Cloud:Native Microservices with Jakarta EE
- ElasticSearch Server
- 企業(yè)網(wǎng)絡(luò)組建與維護(hù)項(xiàng)目式教程