WebStorm 下React和webpack的初始配置

最新推荐文章于 2024-05-16 09:13:54 发布
最新推荐文章于 2024-05-16 09:13:54 发布
阅读量1.5w 收藏 6
点赞数 4
分类专栏： React.js 文章标签： node.js mac javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jeikerxiao/article/details/53667599
版权

喜欢WebStorm支持JSX语法和代码高亮以及代码提示。

1. 安装环境

在一切开始前，请装好Node.js的环境，确保npm命令可以使用。

Mac下请使用 brew install node 安装。

2.WebStorm的配置

在WebStorm上默认打开React编写的js文件代码会报错，这时候需要去设置里面 Languages&Frameworks => javaScript 勾选 JSX Harmony

Mac下 ‘CMD + , ‘打开设置：

这里写图片描述

在Libraries下勾选如下:

这里写图片描述

3.创建项目

随便创建一个文件夹，如 React_Demo ,用Webstorm打开 File - Open 。然后创建的工程目录大

最低0.47元/天 解锁文章
jeikerxiao
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
webstorm 创建react组件_react+webpack+webstorm开发环境搭建
weixin_39621819的博客
12-21 314
需要安装的软件node.jsnpm包管理以上两个包的下载地址如下：由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm更换npm库的源由于国内的网络原因，推荐只用阿里的npm源地址构建项目使用webstorm新建一个空白项目打开控制台，在控制台里输入npm init 命令来初始化一个package.json文件，这个文件是一个类似于pom.xml的文件，用来描述需要的依赖库。在控制...
vue和webpack项目构建过程常用的npm命令详解
08-27
Vue 和 Webpack 项目构建过程常用的 npm 命令详解 在构建 Vue 和 Webpack 项目时，了解常用的 npm 命令是非常重要的。本文将通过实例代码介绍 Vue 和 Webpack 项目构建过程常用的 npm 命令。 安装 Vue 要安装最新...
WebStorm 识别 webpack 配置 alias @ 等
MAIMIHO的博客
11-27 903
WebStorm 识别 webpack 配置 alias @ 等 根目录创建 webstorm.config.js 内容 const webpackConfig = require("@vue/cli-service/webpack.config.js"); module.exports = webpackConfig; 引入配置 File | Settings | Languages & Frameworks | JavaScript | Webpack ...
从零开始，用Webpack构建React基础教程(1)
最新发布
2401_84092169的博客
05-16 412
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
使用webstrom，简单配置一个webpack打包项目
D_Z_Yong的博客
08-22 1147
首先安装webstrom编辑器，其次安装nodejs已安装的可以直接往下看
配置webpack.config.js让WebStorm识别@路径别名
chen_can89的博客
06-27 3973
vue3.0之前的项目，如果想让WebStorm识别项目中类似于 import HelloWorld from '@/components/HelloWorld.vue' 这样的文件路径(Ctrl + 鼠标点击，可以跳转到HelloWorld.vue的定义），可以在WebStorm中配置“webpack.config.js”，此文件就在项目的根目录中。 具体配置方法：webstorm -> file -> settings -> language & frameworks
webpack快速入门-基本配置
温情
09-03 441
Webpack都通过文件进行配置，来增强Webpack的功能。
npm.cnpm.webpack.nvm
05-29
此外，`package.json`文件用于记录项目的依赖关系和配置信息，方便团队协作和版本控制。 `cnpm`是针对中国用户的npm镜像，它的主要目的是解决由于网络问题导致的npm包下载缓慢或失败的问题。使用`cnpm`，开发者可以...
react-complete-template:一个完整的React模板，包含有组织的文件夹、编辑器配置、导入自动排序、私有路由和一些基本库。
05-29
在技术栈上，模板基于**Create React App**，这是一个官方提供的React应用脚手架，它提供了一键创建新项目的能力，内置了Webpack和Babel等工具，无需开发者手动配置，简化了项目的初始化过程。 最后，项目使用**MIT...
React项目
02-20
在“React-Projects-main”这个压缩包中，很可能会包含`package.json`配置文件、源代码目录（如src）、静态资源文件夹（如public）、配置文件（如webpack.config.js）、测试文件等。解压后，你可以根据项目结构和...
苹果React
02-13
- 此文件名可能是某个React项目的源码仓库，包含了实现苹果平台React应用的所有文件和目录，可能包括`src`（源代码）、`package.json`（项目配置）、`README.md`（项目说明）等。 综上所述，苹果React涉及的是使用...
webstorm搭建vue环境以及通过webpack模板搭建项目流程
08-19
webstorm搭建vue环境以及通过webpack模板搭建项目流程
webpack的配置和使用
weixin_51445423的博客
09-15 1529
webpack的配置和使用
react 引入less 2018/12/21
weixin_40046130的博客
12-21 1016
最新的react包 引入less npm install less less-loader --save npm run eject 暴露出webpack 找到build中webpack.config.dev.js 新版本貌似引入sass  所以我们把关于sass 替换成less就ok 将sass替换成less 将sass-loader替换成less-loader 嫌麻烦的直接复制下面代码...
WebStorm/IDEA开发调试Vue/Webpack的方法
hfma2000的博客
06-05 1469
1、Vue项目，配置修改： 打开config/index.js文件, 修改source map属性，从cheap-module-eval-source-map改为source-map 2.编辑调试配置，新建JavaScript调试配置，并设置要访问的url，以及Remote url配置 在URL处填写: http://localhost:8080( 具体的端口看自己的程序写的是监听哪一个) 在src的Remote url处填写: webpack:///src 3.启动server，可以使用
React学习一——webstorm环境搭建和React基础语法
weixin_43896829的博客
08-12 2549
React 一、环境搭建 Node.js+WebStorm+react.js Node.js 在rTool上搜索node.js,下载安装包 打开安装，除了路径，一路next (1) 修改环境变量 计算机->属性->高级系统设置->环境变量->系统变量->path编辑->将安装路径加入其中 (2) 测试 此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号： (3) 配置npm在安装全局模块时的路径和缓存ca
新手使用webstorm创建React项目
KJune的博客
02-12 5142
1、在想要使用react.js之前，电脑上需要安装好node.js。如果没有安装的要先去官网或者其他途径下载安装并配好环境。然后在命令窗口输入以下命令来下载create-react-app脚手架工具包： npm install -g create-react-app 2、安装好之后我们再来安装webstorm工具。 3、安装成功后打开软件界面，选择新建一个项目，这里新建的项目工程名...
针对于WebStorm工具开发React工程详细配置
热门推荐
天外野草技术专栏
12-07 4万+
前言WebStorm作为目前最流流行的前端IDE, 无论从运行速度还是开发的便捷性，无形之中提高了工作效率，目前比较火爆的React也越来越被众多开发人员所采纳，但是WebStorm下的React工程经常会出现很多警告以及转换提示，下面我就对此做一些整理，方便更多同志使用。React Library支持点击下载按钮，下来所需要的react library:激活所选library, 应用即可支持JSX
webstorm如何识别webpack中的@等alias符号
weixin_36646275的博客
04-22 1683
面试：你懂什么是分布式系统吗？Redis分布式锁都不会？>>> ...
webstorm创建react项目
09-13
在WebStorm中创建React项目，可以按照以下步骤进行操作： 1. 打开WebStorm，并点击主界面的 "Create New Project" 或者 "New Project" 按钮。 2. 在弹出的对话框中，选择左侧的 "React" 并点击 "Next"。 3. 在下一个页面中，输入项目名称和选择项目存储路径，然后点击 "Next"。 4. 在下一个页面中，选择使用 "npx create-react-app" 创建项目，确保 "Use npx" 选项被选中。然后点击 "Next"。 5. 最后，在下一个页面中，选择需要包含的附加插件或者模板。你可以根据需要选择是否包含ESLint、TypeScript等插件。完成后，点击 "Finish"。 6. WebStorm将会自动为你创建React项目，安装相关依赖，并打开项目。 现在，你已经成功在WebStorm中创建了一个React项目。你可以开始编写React代码并运行你的应用程序了。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值