Customizing default CommonsChunkPlugin in next.config.js


next.js 是 React 的一个很常用的 ssr（server-side-render）框架， 它内置了很多 webpack 的插件和配置，基本上可以  很简洁的去构建同构项目。

虽然很简洁，但是很多情况下我们还是想自己去定义一些配置，比方说打包的路径之类的。这里遇到了一个坑： 在打包并  导出静态资源时，发现有一个 common 的 main.js 文件一直带着一个 hash， 由于我们的项目  是容器去自己打包，因为配置文件的不同，所以打包后的 chunk 和本地的一定不同，但我们的静态资源还要上传到 cdn，所以这里就有了问题，想把 hash 去掉，看了半天 issue 没找到结果，最后读了一下源码，找到了解决办法：

1
2
3
4
5
6
7
8
9
10
webpack: (config, { isServer, buildId }) => {
  if (!isServer) {
    config.plugins = config.plugins.map(plugin => {
      if (plugin.constructor.name === 'CommonsChunkPlugin') {
        plugin.filenameTemplate = 'static/commons/main.js'
      }
      return plugin
    })
  }
}

在 next.config.js 中的 webpack 方法里这样写。这里注意：如果你是用 config.plugins.push()的话，是不会生效的，原来的依旧会存在，必须找到对应的内置插件的 name 去替换

Next.js, React Next.js

点击阅读

about-seo-meta


Meta Description

描述标签，是 html 代码中以简短描述网页内容的一个标签，其格式如下：

1
2
3
<head>
    <meta name="description" content="这是网页的描述信息">
</head>
SEO SEO

点击阅读

Next.js 引入多个style文件上的一些小问题


Next.js 是  一个非常好用，并且极易上手的 React-Server-Side-Render Framework，而且支持了很多的一些玩法和操作，也可以  去配置 router、redux、mobx、ts、flow、immutable、graphql、apollo 等、但是样式引用上却还是没办法有一种类似 vue 的方式。

目前  大致有几种思路处理样式： css-in-js、webpack 打包 + css module 、自己写完用 gulp 或者 rollup 等打包工具来自行打包

React Next.jsReact

点击阅读

Cannot launch AVD on macOS High Sierra 10.13.4


使用 android studio 编译 RN 时，打开模拟器会报错：

1
2
3
4
5
6
7
emulator: WARNING: encryption is off
Hax is enabled
Hax ram_size 0x60000000
Failed to open vm 3
Failed to create HAX VM
No accelerator found.
failed to initialize HAX: Invalid argument

原因是 HAXM 导致的，然后我试了一下直接在 sdk tools 里面更新，但是并没有修复，最终是直接去 https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager-end-user-license-agreement-macosx 这里下载的。

然后重启电脑就好了。

React Native React NativeAndroid

点击阅读

记一次前端面经


写在前面

作为一个双非一本渣校，还不是应届（去年毕业的），个人还是很想去大公司氛围好的团队（虽然很菜但是还是想去哈哈），然后就选了上海的两件比较不错的去面试：携程和哈罗单车。

面经

点击阅读

koa源码学习


最近新开了2个repo，一个用来记录一些常用网站：bookmarks，另一个记录对koa源码的理解：LearnNodejs-Koa。 是直接在源码上做的注释。里面还有阅读深入浅出Nodejs的一些理解。

现在开始看Vue的，尽量在理解完写完注释后把要点记录在博客里。

自己以前看不懂的东西拿来重新看，就感觉比以前通透了一些，以后还会继续回头看，哈哈。

五一还是要出去玩玩的，顺便练习一下拍照，毕竟准备要走了，总得把景点赶紧逛完才不留遗憾。

个人小纪 前端后端.

点击阅读

koa2-compose学习


最近在一点一点学习koa源码和深入浅出Node.js那本书，因为现在egg也是基于koa2的，而且自己以前做毕设的时候也用过，async/await真的是太好用了；现在新的中间层用egg搭建，所以想彻底把这部分的东西好好系统看一遍。

Node.js Node.js

点击阅读

React高阶组件(转)


前言

本文代码浅显易懂，思想深入实用。此属于react进阶用法，如果你还不了解react，建议从文档开始看起。

我们都知道高阶函数是什么, 高阶组件其实是差不多的用法，只不过传入的参数变成了react组件，并返回一个新的组件.

A higher-order component is a function that takes a component and returns a new component.

react react

点击阅读

edit-highlight


把Lap的highlight风格做了一次大的调整，改成了自己最喜欢的atom-one-dark，只不过ES6的语法好像暂时没办法高亮，因为hexo内置hl渲染方法渲染出来的dom节点根本没办法对ES6部分写样式。
下面的是效果的展示，暂时也算满意了，可能以后还会进行一次调整。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
}
const sss = () => {

}
let a = 1
export  $initHighlight;
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id='title'>Title</p>
  <!-- here goes the rest of the page -->
</body>

点击阅读

归档:

AngularJS JavaScript Next.js Node.js React React React Native SEO react 个人小纪

Proudly powered by Hexo and Theme by Lap
本站访客数人次
©2016 - 2018 BosenY