creat-react-app 从npm start 跟npm run build后走过了那些文件

    npm install creat-react-app后,大家比较关心的就是package.json,还有webpack.config(这个文件是在根目录下找不到)。至于为什么找不到呢?那是因为creat-react-app想让你有一种拎包入住的感觉,什么配置,什么参数之类的都不用管,你只要去开发逻辑代码就行了。所以他把所有的配置项都给藏起来了。找肯定是能找到的。所有的配置项什么加载规则,路径问题,webpack的插件等等都在node-modules下的react-scripts这个文件中。

    首先来看package中的东西都有那些。其实package是npm init后出来的项目日志,里面肯定会包括项目名称,作者等等,那么这些不重要,重要的是里面的'dependencies','devDependencies'和'scripts'这三个对象;

    dependencies对象中方的是打包后的项目依赖(比如react, react-dom等等);

    devDependencies对象中则放入的是我们在开发环境中所要用的一些依赖;

    那么问题来了怎么在npm install的时候把对应的依赖放入对应的模式中,可能大多数人都熟悉你npm install 'xxxx'  --save。那么执行你npm install 'xxx' --save会把依赖放哪儿呢?是放在dependencies这个对象中,那么怎么把依赖放在devDependencies中呢?npm install 'xxx' --save-dev

    要说明的是没有的依赖不要加在devDependencies中不然打包出来的项目会比较大,尤其是移动端的项目。

    说完了devDependencies了跟dependencies这两个模块那接下来说说scripts,其实这个才是重点 ,什么npm start, npm run build ,npm run test这些命令都是在scripts下控制的,

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "flow": "flow; test ? -eq 0 -o ? -eq 2"
  },

有细心的朋友可能会想为什么start可以直接npm start,而除了start之外的命令都是npm run  'XXX',确实是这样的如果你非要npm build 那么很不幸,命令行会直接报错。总而言之你就当start是亲妈生的,其他命令是后妈生的。

    那我们接下来看看start这几个命令

 "start": "react-scripts start",这句话的意思就是当运行npm start 的时候去调运node_modules下的react-scripts 中的start.js文件
"build": "react-scripts build",这个命令的意思也是一样的同上,调用了build.js

至于其他几个命令很少用,如果有想了解的朋友可以去githup去看看 点击打开链接

上面说了这么多很多都跟react-scripts这个东西有关,那让我们来看看这个让人家故意隐藏起来的东西

    图中就是整个react-scripts的结构目录

    这里大概说说当运行npm start的时候走了那些文件,第一个走的文件就是根目录下的package.json ,根据start命令react-scripts start的指示接下来进入了react-script中,然后走到了react-scripts下bin文件中的react-scripts.js  而且传进来了参数start 那么根据react-scripts.js 中的逻辑接着会进入到scripts 下的start.js文件。在starts.js中后会调用webpack.config.dev.js,会去调用一些webpack的加载规则肯还有webpack的本地server。

    当运行一个命令后大概就执行了这么多,其实在webpack.config.dev.js中还调用了其他的文件,比如对css,js,文件名,的一些规则的文件和插件。这些准备回单独出一篇,如何使用webpack的常用插件,以及加载编译打包的规则。

    有一个问题需要注意的是打包后的文件路径问题,我们只需要找到react-scripts下的path.js文件中把

function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
return ensureSlash(servedUrl, true);
}

改成

function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
return ensureSlash(servedUrl, true);
}
然后就ok了。

阅读更多
想对作者说点什么? 我来说一句

VUE Mint UI 前端组件用例

2018年05月15日 317KB 下载

没有更多推荐了,返回首页

不良信息举报

creat-react-app 从npm start 跟npm run build后走过了那些文件

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭