在学react时候找不到static/js/bundle.js
看如图上面bundle.js,我在项目中和配置文件中都没有找到这个JS文件,然后我就觉得很诧异,然后各种查找,终于找到一篇文章,在此记录一下
第一步:npm run start
我们 一开始这么启动服务 运行项目
打开你的my-app\package.json
"scripts": {
"start": "react-scripts start",
...
}
所以执行的是 react-scripts start
打开你的my-app\node_modules\react-scripts这个文件夹下的bin文件夹下的react-scripts.js文件
#!/usr/bin/env node
var spawn = require('cross-spawn');
var script = process.argv[2];
var args = process.argv.slice(3); switch (script) {
case 'build':
case 'eject':
case 'start':
case 'test':
var result = spawn.sync(
'node',
[require.resolve('../scripts/' + script)].concat(args),
.......
上面代码中 script 的变量值是 start
所以执行 my-app\node_modules\react-scripts\scripts 文件夹下的 start.js 文件代码节选重点如下
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server'); // 启动http服务器
var paths = require('../config/paths'); //要编译的文件路径与生成路径等
var config = require('../config/webpack.config.dev');
var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; //这就是为什么 端口号 不是8080 而是 3000 的原因,在这里可以改成8080,重新npm run start 生效
detect(DEFAULT_PORT).then(port => {
if (port === DEFAULT_PORT) {
run(port); //这里开始运行
return;
}
...... function run(port) {
// 这里可以设置 http协议, 或者可以在 npm run start 之前 cmd命令窗口中执行 set HTTPS=true&&npm start 改成https 安全协议
var protocol = process.env.HTTPS === 'true' ? "https" : "http";
var host = process.env.HOST || 'localhost';
setupCompiler(host, port, protocol); // 编译源码 ,生成路径
runDevServer(host, port, protocol); //启动 http服务器
} //配置http服务器
function runDevServer(host, port, protocol) {
var devServer = new WebpackDevServer(compiler, {
compress: true,
clientLogLevel: 'none',
contentBase: paths.appPublic, //根据导入的paths 指定应用根目录(即index.html所在目录)
hot: true, publicPath: config.output.publicPath, //根据导入的 config 变量,指定 虚拟目录,自动指向path编译目录(/assets/ => /build/js/)。html中引用js文件时,
//必须引用此虚拟路径(但实际上引用的是内存中的文件,既不是/build/js/也不是/assets/)。 quiet: true, watchOptions: {
ignored: /node_modules/
},
// Enable HTTPS if the HTTPS environment variable is set to 'true'
https: protocol === "https",
host: host
});
/**
* 省略其他代码
*/
openBrowser(protocol + '://' + host + ':' + port + '/'); // 打开浏览器 向服务器发送请求
});
} function setupCompiler(host, port, protocol) { compiler = webpack(config, handleCompile); // 根据导入的 config 变量 指向的 webpack.config.dev 配置文件 运行
/**
* 省略其他代码
*/
}
start.js 文件代码 中 导入了 my-app\node_modules\react-scripts\config文件夹下的 webpack.config.dev.js 与 paths.js
paths.js 代码节选如下:
var appDirectory = fs.realpathSync(process.cwd()); // 获取npm run start 运行所在的路径
function resolveApp(relativePath) {
return path.resolve(appDirectory, relativePath);
} module.exports = {
appPath: resolveApp('.'),
ownPath: resolveApp('node_modules/react-scripts'),
appBuild: resolveApp('build'),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'), // 这就是 一开始 我们的项目 要使用public/index.html作为 默认首页
// 这里写什么文件名,项目中就要使用什么文件名 包括 也要有public文件夹
appIndexJs: resolveApp('src/index.js'), //编译的入口文件的文件名 项目中要包括src文件夹
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveApp('src/setupTests.js'),
appNodeModules: resolveApp('node_modules'),
// this is empty with npm3 but node resolution searches higher anyway:
ownNodeModules: resolveOwn('node_modules'),
nodePaths: nodePaths,
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json'))
};
/**
* 省略其他代码
*/
webpack.config.dev.js 代码节选如下:
var paths = require('./paths'); //也导入了 同文件夹下的 paths.js
module.exports = { entry: [ require.resolve('react-dev-utils/webpackHotDevClient'), require.resolve('./polyfills'), paths.appIndexJs // 编译的入口文件 ], output: { path: paths.appBuild, pathinfo: true, filename: 'static/js/bundle.js', // 只是编译后生成的目标文件 ,这就是一开始我们 打开浏览器按f12看到的index.html导入的 // <script type="text/javascript" src="/static/js/bundle.js"></script> publicPath: publicPath },
/**
* 省略其他代码
*/ }
在学react时候找不到static/js/bundle.js的更多相关文章
- 从 Vue 的视角学 React(四)—— 组件传参
组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式, ...
- 从零学React Native之13 持久化存储
数据持久化就是指应用程序将某些数据存储在手机存储空间中. 借助native存储 这种方式不言而喻,就是把内容传递给native层,通过原生API存储,详见从零学React Native之05混合开发 ...
- 小白学react之网页获取微信用户信息
通过上一篇<小白学react之EJS模版实战>我们学习了怎样通过EJS模版生成我们高定制化的index.html文件. 本篇我们将会继续延续我们的alt-tutorial项目的实战计划.去 ...
- 一起学react (1) 10分钟 让你dva从入门到精通
前言 如果文章中有错误的地方的话 可以直接加我QQ:469373256 自己针对一些问题做的优化版本 目前刚启动 还不是很成熟 https://github.com/fangkyi03/fastkit ...
- 从零学React Native之11 TextInput
TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式. 与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本 ...
- 从零学React Native之03页面导航
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...
- 从零学React Native之02状态机
本篇文章首发于简书 欢迎关注 之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 本篇文章主要介绍下下面的知识: 1.简单界面的搭 ...
- 我们一起学React Native(一):环境配置
最近想在项目中实现跨平台,对比一下主流的实现方式,选用了React Native.参考网上的教程,对于一直都是原生移动端开发,对前端的知识不是很了解的,感觉入门不是特别简单.于是打算把学习React ...
- JavaScript 和 React,React用了大量语法糖,让JS编写更方便。
https://reactjs.org/docs/higher-order-components.htmlhttps://codepen.io/gaearon/pen/WooRWa?editors=0 ...
随机推荐
- 【主机管理项目】-(models.py(一对多、多对多数据库创建代码))
# -*- coding: utf-8 -*- from __future__ import unicode_literals from django.db import models class U ...
- C# 跨线程调用控件的4中方法
原文:C# 跨线程调用控件 在C# 的应用程序开发中, 我们经常要把UI线程和工作线程分开,防止界面停止响应. 同时我们又需要在工作线程中更新UI界面上的控件, 下面介绍几种常用的方法 阅读目录 线 ...
- AES-OZ745 OZ745 Zynq-7000 开发板与套件
北京太速科技有限公司为广大合作单位特设海外代购业务,主要包括各类板卡.相机.传感器.仪器仪表.专用芯片等.代购业务仅收取基本的手续费. 北京太速科技有限公司在线客服:QQ:448468544 淘宝网站 ...
- 脚本_检测 MySQL 数据库连接数量
#!bin/bash#功能:检测 MySQL数据库连接数量,以满足对 MySQL 数据库的监控需求,查看 MySQL 连接是否正常.#作者:liusingbon#本脚本每 2 秒检测一次 MySQL ...
- robotframework的if else
- windows下搭建Mongo主(Master)/从(slave)数据库同步
需要启动两个mongoDb文档数据库,一个是主模式启动,另一个是属于从模式启动. 1. 创建主从服务器 主服务器:192.168.1.131:27017 备服务器:192.168.1.131:2701 ...
- Center OS7网络设置
虚拟机上设置网络连接为NAT方式(两层路由) 1:保证windows NAT 和dhcp服务启动 2:/etc/sysconfig/network-scripts/ifcfg-* TYPE=Ether ...
- Flutter-RaisedButton
RaisedButton({ Key key, //点击按钮的回调出发事件 @required VoidCallback onPressed, //水波纹高亮变化回调 ValueChanged< ...
- bzoj4987 Tree 树上背包
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4987 题解 一道还不错的题咯. 很容易发现一个结论:这 \(k\) 个点构成的一定是一个连通块 ...
- Yii Ar model 查询
Ar model 查询 参照表: CREATE TABLE tbl_user ( id INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT, username VA ...