Giter VIP home page Giter VIP logo

my-bfe-awesome's Introduction

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

my-bfe-awesome's People

Contributors

choukin avatar

Watchers

 avatar

Forkers

web-logs2

my-bfe-awesome's Issues

移动端 html 调试工具

移动端 html 调试工具

  1. debuggap

    vide 是一款用 vue 和 vuex 开发的 ide 有一个调试 webview 的插件

    1. 安装 VIDE
    2. 打开 VIDE 并安装调试 webview 插件 vide-plugin-debug-webview
    3. 获取 debugap.js
    4. 在要调试的页面中引入debuggap.js
    5. 打开安装的调试 webview 工具
    6. 在页面点击出现的调试按钮,输入 server ip 和端口
    7. 在编辑器中就可以看是远程调试了
  • 优点

    • 可以在移动页面就可以看到 dom 结构
    • 可以查看报错信息
  • 缺点

    • 不能调试 js
    • 样式查看支持的不好

    VIDE 参考

  1. weinre

    网页远程审查(web inspector Remote) 可以在 PC 上 调试运行在移动端的页面

  • 安装

      sudo npm install -g weinre
  • 启动

      weinre --boundHost 10.204.2.59 --httpPort 9090

    boundHost 后面接自己的 ip 地址 httpPort 是接口
    访问 http://10.204.2.59:9090 即可启动客户端调试 如下图

    image
    - Access Points 中 debug client user interface: | http://10.204.2.59:9090/client/#anonymous 是客户端调试链接,点击进去可以看到目标调试对象列表,选择自己要调试的网页开始调试即可
    - Target Script 是需要放在目标网页上的 js 链接

  • 优点

    • 可以看到 dom
    • 可以查看报错信息
  • 缺点

    • 不能调试 js
    • 样式查看支持的不好

weinre 参考

  1. Vconsole 腾讯出品

    一个轻量、可拓展、针对手机网页的前端开发者调试面板。

    • 缺点
      • 不能查看页面dom结构
  2. spy-debugger

    内部集成了weinre、node-mitmproxy、AnyProxy

VSCode 快捷键 mac

mac 目前只有mac版

1.项目中搜索文本 shift + command + f

2.搜索文件 option + p

在 Ctrl+P 窗口下还可以:

直接输入文件名,跳转到文件

  1. ? 列出当前可执行的动作
  2. ! 显示 Errors或 Warnings,也可以 Ctrl+Shift+M
  3. : 跳转到行数,也可以 Ctrl+G 直接进入
  4. @ 跳转到 symbol(搜索变量或者函数),也可以 Ctrl+Shift+O 直接进入
  5. @ 根据分类跳转 symbol,查找属性或函数,也可以 Ctrl+Shift+O 后输入:进入

根据名字查找 symbol,也可以 Ctrl+T

3. 隐藏显示左侧目录 command + b

4. 删除上一个单词

5. 选择左右侧内容

6.删除上一个单词

7. 逐个选择文本

8. 复制行

查找下一个选中的内容 command+d

移动行

删除行

定位到文件的头部或者尾部

参考

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.