Skip to content

choukin/my-bfe-awesome

Repository files navigation

lang title description
zh-CN
收集
收集好玩的

my-bfe-awesome

前端个人积累 🎉

一加一等于 {{1+1}} span: {{ i }} 这是默认主题内置的 <Badge /> 组件 [[toc]]

TODO

目录

node 相关

node 常量

  • __dirname :全局变量,存储的是代码所在文件的所在的文件目录
  • __filename:全局变量,存储的是代码所在文件的文件名
// /work/coding/githubbuild/my-bfe-awesome/test.js
console.log(__dirname);
// /work/coding/githubbuild/my-bfe-awesome
console.log(__filename);
// /work/coding/githubbuild/my-bfe-awesome/test.js
  • 查看全局对象 再终端输入 node 后 安两次 tab 键

电子书

webpack

new HtmlWebpackPlugin({
    filename: path.resolve(config.build.assetsRoot, 'index.html'), // 生成的html的文件名
    template: 'index.html', // 依据的模板
    inject: true, // 注入的js文件将会被放在body标签中,当值为'head'时,将被放在head标签中
    minify: { // 压缩配置
    removeComments: true, // 删除html中的注释代码
    collapseWhitespace: true, // 删除html中的空白符
    removeAttributeQuotes: true, // 删除html元素中属性的引号
    minifyJS: {
        compress: {
        warnings: false
        }
    },
    // 更多配置
    // https://github.com/kangax/html-minifier#options-quick-reference
    },
    chunksSortMode: 'dependency' // 按dependency的顺序引入
}

动画库

  1. velocity.js 支持链式调用
  2. gsap GSAP 是一个 JavaScript 库,用于创建适用于所有主流浏览器的高性能动画
  3. tweenjs TweenJS 类库主要用来调整和动画 HTML5 和 Javascript 属性,提供了简单并且强大的 tweening 接口。
  4. hilo 阿里的 HTML5 互动游戏引擎
  5. pixijs PixiJS 是一个超快的 2D 渲染游戏引擎。它自动侦测使用 WebGL 或者 Canvas。
  6. Kaboom.js Kaboom 是一个 JavaScript 库,可帮助您快速有趣地制作游戏.

前端工具

博客

工具

图片相关

pm2

安装

  npm install pm2 -g
  // 进程间通信模块保证日志正常打印 pm2 安装模块依赖 git
  pm2 install pm2-intercom

配置文件

 // package.json 里 scripts 的配置
    "pm2": "pm2 start ./config/ecosystem.config.js --env production",
// config/ecosystem.config.js
module.exports = {
  /**
   * Application configuration section
   * http://pm2.keymetrics.io/docs/usage/application-declaration/
   */
  apps: [
    // First application
    {
      name: "",
      script: "./bin/www",
      watch: true,
      ignore_watch: [
        // 从监控目录中排除
        "node_modules",
        "logs",
        "public",
        ".idea",
        ".git",
      ],
      watch_options: {
        followSymlinks: false,
      },
      error_file: "./logs/pm2/app-err.log", // 错误日志路径
      out_file: "./logs/pm2/app-out.log", // 普通日志路径
      instances: 2,
      // instance_var: "NODE_APP_INSTANCE",
      exec_mode: "cluster", // 集群模式 负载均衡
      env: {
        COMMON_VARIABLE: "true",
      },
      env_production: {
        NODE_ENV: "production",
      },
      env_dev: {
        NODE_ENV: "dev",
      },
      env_test: {
        NODE_ENV: "test",
      },
    },
  ],
};

字符串模版 折行转义字符

var htmlSTring =
  "<div>\
  This is a string.\
</div>";

http://[fe80::461c:a8ff:fe2a:accf%2]:3911/1ed680d5-6138-4608-a269-8840850a96f9