[TOC]

React.lazy 导致 react-router 报错

Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

react-router issue-6420，react-router 4.4.0-beta.5 修复了这个错误

taro 3.x 提示缺少 page.config

参考 https://taro-docs.jd.com/taro/docs/migration，页面需要配置 *.config.js，而 taro-ui 模板创建出的文件缺少 这个配置文件，原因是 https://github.com/NervJS/taro-project-templates/tree/v3 中 taro-ui 模板配置 basePageFiles 缺少 ‘/src/pages/index/index.config.js’:

function createWhenTs (params) {
  return !!params.typescript
}

const handler = {
  '/global.d.ts': createWhenTs,
  '/tsconfig.json': createWhenTs,
  '/src/pages/index/index.jsx' ({ pageName }) {
    return { setPageName: `/src/pages/${pageName}/${pageName}.jsx` }
  },
  '/src/pages/index/index.css' ({ pageName }) {
    return { setPageName: `/src/pages/${pageName}/${pageName}.css` }
  },
  '/src/pages/index/index.vue' ({ pageName }) {
    return { setPageName: `/src/pages/${pageName}/${pageName}.vue` }
  },
  '/src/pages/index/index.config.js' ({ pageName }) {
    return { setPageName: `/src/pages/${pageName}/${pageName}.config.js` }
  }
}

const basePageFiles = [
  '/src/pages/index/index.jsx',
  '/src/pages/index/index.css',
  '/src/pages/index/index.vue',
]

module.exports = {
  desc: '使用 taro-ui 的模板',
  handler,
  basePageFiles,
  platforms: ['react', 'nerv']
}

Stylelint: property-no-unknown

stylelint 配置中 extends 已经加了 stylelint-config-css-modules，还是报错，原因是 extends 中加了 stylelint-config-rational-order（同样配置了 property-no-unknown 规则），导致 stylelint-config-css-modules 中的 property-no-unknown 规则不生效

:export {
  primarycolor: @primary-color;
  whitecolor: @whiteColor;
}

修改配置，stylelint-config-css-modules 放在 stylelint-config-rational-order 后面：

module.exports = {
    extends: [
        'stylelint-config-standard',
        'stylelint-config-rational-order',
        'stylelint-config-css-modules',
        'stylelint-config-prettier',
        'stylelint-no-unsupported-browser-features',
    ],
    plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties'],
    rules: {
        'no-descending-specificity': null,
        //https://github.com/stylelint/stylelint/issues/4114
        'function-calc-no-invalid': null,
        'function-url-quotes': 'always',
        'font-family-no-missing-generic-family-keyword': null,
        'plugin/declaration-block-no-ignored-properties': true,
        'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
    },
    ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
};

或者添加 rules ：

const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.stylelint,
  rules: {
    'property-no-unknown': [
      true,
      {
        ignoreProperties: ['composes', 'compose-with', '@import', '@extend', '@mixin', '@at-root'],
        ignoreSelectors: [':export', /^:import/],
      },
    ],
  },
};

ESLint: Function declared in a loop contains unsafe references to variable(s) ‘XXX’

let mac_id = '';
for (let i in obj) {
  obj[i].map((item,index) => {
    if (item === code) {
      // Function declared in a loop contains unsafe references to variable(s) 'mac_id'
      mac_id = i;
    }
  });
}

修改为：

let mac_id = '';
for (let i in obj) {
  let tmp = '';
  obj[i].map((item,index) => {
    if (item === code) {
      // Function declared in a loop contains unsafe references to variable(s) 'mac_id'
      tmp = i;
    }
  });
  mac_id = tmp;
}

js 中文字节

GBK 编码，一个汉字占两个字节。
UTF-16 编码，通常汉字占两个字节，CJKV扩展 B 区、扩展 C 区、扩展 D 区中的汉字占四个字节（一般字符的 Unicode 范围是 U+0000 至 U+FFFF，而这些扩展部分的范围大于 U+20000，因而要用两个 UTF-16）。
UTF-8编码是变长编码，通常汉字占三个字节，扩展 B 区以后的汉字占四个字节。

作者：stevenliuyi
链接：https://www.zhihu.com/question/20451870/answer/15168034
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

import * as vs import

  • import from ，需要有 export default，如果没有 default， 就是 undefined
  • import * as from ，引入所有 export （包含 default 在内）

    node_modules/.bin 中的工具

    例如 tsc、eslint，如果直接在命令行使用，会发现报错 command not found，这是因为 npm run xxx 时会自动把 node_modules/.bin 中的工具注册到环境变量中，所以写在 package.json 的 scripts 中的 tsc --noEmit eslint --fix 在执行时时有效的；
    so 控制台使用时可以 npm run