安装create-react-app教程及简单配置
1.安装
//my-app为项目名称 因为本文是教程所以就以默认的my-app为例进行安装
npm init react-app my-app
当出现下方图片的这个样子时,就代表我们安装成功了。
我们可以按照其的建议 先进入到自己的项目,然后再运行一下,看看项目是否能正常启动,如果不能,我们就需要按需解决其出现的问题。
cd my-app
npm start
2.将项目的配置文件暴露出来
通过查看项目文件列表,我们可以发现,我们找不到该项目的配置文件。
当然,如果我们只是学习一些简单的react语法的话,我们无需修改项目的配置文件。但是,如果我们需要进行一些高级的使用,例如:加载一些webpack插件、babel解析插件、设置别名、本地跨域代理等时,我们就不得不需要对项目的配置文件进行修改。
暴露配置文件的命令为
npm run eject
命令输入后,会出现一个提示信息,询问我们是否要确认操作。当我们输入 y 后,等待即可。
注意:这是一项单向操作,一旦暴露就无法还原恢复!
我们可以看到如下图所示,一些新的文件被抛出创建,我们需要的配置文件就在config文件夹中。
3.自定义配置
3.1区分npm包的开发环境和生产环境
我们可以看到,抛出的package.json中,所有的npm都在生产环境中。如果将来我们要将项目进行打包的话,项目包的体积将会变得很大。因此,我们需要将一些开发才会用到的包提取出来定义。这里就需要大家自己来均衡了,例如:一些babel以及ESlint等包就是开发才会用到的包。
我们需要在package.json中添加这个devDependencies,并将一些npm包存放到这里。如图我进行了简单的分包,将react的特有包放入到生产环境中。
我们将包分开后,先将node_modules删除,再重新安装,以避免分包产生一些问题影响到以后的开发或打包。
重新安装node_modules我们可以使用如下命令
npm i
然后重新运行项目:npm start
当浏览器出现如下页面时,表示项目成功的运行起来了。之前的分包没有出现什么问题。
3.2定制项目配置,并运用
新建一个react.config.js文件,详情可以查考vue-element-admin项目的vue.config.js文件。当然,我只设置一些简单的配置以做演示。
const path = require('path')
module.exports = {
resolve: {
// 设置别名, 列如用@来代理src文件夹的绝对路径
alias: {
'@': path.resolve(__dirname, 'src')
}
},
module: {
// babel解析规则,例如:如下的解析.less文件
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
lessOptions: {
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
}
}
}
]
}
]
},
// 这里可以存放要使用的插件
plugins: [],
//这里配置开发环境,以用来开发时做跨域请求等的设置,详情可以自行百度了解
devServer: {
port: 3000,
open: false,
proxy: {
'/api': {
target: 'http://localhost:3000/',
changeOrigin: true,
}
}
}
}
在项目的cofig文件中webpackDevServer.config.js中进行如下配置,以用来设置proxy等配置。
在config的webpack.config.js文件中,可以进行如下的修改。
目前,我们先进行如下的修改,其他需求配置可以慢慢的配置,然后在config文件夹的文件中进行配置。
注意:这个项目不支持异步加载 async import,修饰器@decorator。需要安装babel-plugin-syntax-dynamic-import,babel-plugin-transform-decorators-legacy两个插件