Write the Code. Change the World.

分类目录
5月 07

很多情况下,我们都想将 react 编译的项目部署到非跟目录。可默认就必须是根目录,怎么实现呢。

操作一波

找到 package.json 文件,仅仅在package.json 文件中加入一行 "homepage":".", 即可。 如下。

{
  …
  "private": true,
  "homepage":".",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
     "axios": "^0.19.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
  …
}

网上还有一种方法,将配置文件暴露出来。执行 npm run eject ,然后修改配置。但感觉这方法比较麻烦,也没弄通过。

如果仅仅是想部署到非跟目录,第一种方法最省事了。

更有意义

https://www.jb51.net/article/158194.htm

https://segmentfault.com/a/1190000018593030

https://blog.csdn.net/zhaolandelong/article/details/78468842

https://www.cnblogs.com/lishanlei/p/9550622.html

1月 11

为了早点体验到 ant design pro 的页面,注释了部分配置,显示出了 welcome 页面。可是当你刷新页面时候,到你面前的就是 404 。这里,就要先解决 404 问题。

Ant Design Pro 使用的 Umi 支持两种路由方式:browserHistoryhashHistory。默认就是 browserHistory。这样漂亮好看。而默认就是这种方式。具体请看:

https://pro.ant.design/docs/deploy-cn#%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E4%B8%8E%E6%9C%8D%E5%8A%A1%E7%AB%AF%E7%9A%84%E7%BB%93%E5%90%88

虽然这种方式漂亮好看。可对于解析认识是个问题。需要服务端进行处理。因为只使用过 nginx,这里就说下 nginx 下的解决方法。

找到对应的 nginx 的配置文件,并修改文件。

如果 ant design pro 编译后的文件直接在根目录下,可以在配置文件中增加

    location /  {
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

如果 ant design pro 编译后的文件不再根目录下(比如在 dashboard 下),可以在配置文件中增加

    location /dashboard  {
        index index.html index.htm;
        try_files $uri $uri/ /dashboard/index.html;
    }

然后保存重启 nginx ,再刷新页面,发现不再是 404 了。

nginx -s reload

homestead 中,虚拟机里的配置文件在 /etc/nginx/sites-available/ 下,可以单独修改,重启。但这样重启后,会再生。清理的脚步在本地的 Homesteadscripts/clear-nginx.sh 中。如果单独对某个域名处理,最好在本地的 scripts/site-types/ 下新建配置,然后 Homestead.yml 文件中,对具体域名指定配置。

多的话就不说了,具体还是 nginx 的修改配置。 至于 nginx 的 try_files 是什么意思了,可以了解下。

try_files 的核心目的就是替代。比如,

location /dashboard  {
    index index.html index.htm;
    try_files $uri $uri/ /index.php?q=$uri&$args;
}

以 根目录(对应站点的根目录)下的 dashboard 目录为参照,先查找第一个节点,看文件是否存在,如果不存在再看文件夹(有斜杠)是否存在,如果再不存在,就指向到第三个参数。

比如具体的 url 是这样的。

https://www.mlxiu.com/dashboard/love

它会先检查 love 这个文件是否存在,如果不存在 love 这个文件则检查 love 这个文件夹。当然,文件的后缀,上边已先列出。

具体看 nginx 的 try_files

https://blog.csdn.net/a519640026/article/details/9138329

https://www.cnblogs.com/boundless-sky/p/9459775.html

10月 17

在用webpack打包的时候,所打包的文件,会经常使用到 module.exports,exports,export和export default,import与require 这些语法。看起来眼花缭乱,其实,都是有迹可循的。

基本问题

  1. module.exportsexports 是属于 CommonJS 模块规范。
  2. exportexport default 是属于 es6 语法。

  3. 同样 importrequire 分别属于 es6CommonJS

  4. module.exportsexportsexportexport default 都是导出模块。 importrequire 则是导入模块。

module.exports 和 exports 的区别与联系

Node应用由模块组成,采用CommonJS模块规范。根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。

CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。
继续阅读