2018年 个人记录

[zhouyun163]

记录本年度学习到的内容or解决的问题

[zhouyun163]

✔️ npm太慢， 淘宝npm镜像使用方法

npm config set registry https://registry.npm.taobao.org

参考：http://blog.csdn.net/quuqu/article/details/64121812

[zhouyun163]

✔️ github支持的emoji列表

https://upload-images.jianshu.io/upload_images/16777-673d7b071ce2e527.png

[zhouyun163]

✔️ angular5官方例子通过ng serve启动服务器不能使用ip地址访问

问题

angular5快速创建工程的命令

ng new my-app
cd my-app
ng serve --open

参考：https://www.angular.cn/guide/quickstart

执行上述命令之后可以通过 http://localhost:4200/ 访问启动的服务器
但是却不能使用ip地址访问

解决办法

在ng server后面增加配置项--host 0.0.0.0之后，就可以通过类似 http://192.168.1.103:4200/ 这样的地址来反问了，这样你就可以通过你的手机连接到同一个局域网之后测试你的针对手机开发的应用了

ng serve --host 0.0.0.0

参考：angular/angular-cli#2375 (comment)

[zhouyun163]

✔️ angular5 如何使用AOT

方式1

ng build --aot
ng server --aot

参考：https://angular.io/guide/aot-compiler

方式2

ng build --prod

参考：https://stackoverflow.com/questions/38932193/angular-2-4-5-ahead-of-time-compilation-how-to

[zhouyun163]

✔️ 结合typescript编译和webpack打包

• 在新建目录中，初始化npm工程

npm init -y

• 全局安装webpack

npm install -g webpack

• 安装typescript和ts-loader

npm install --save-dev typescript ts-loader

• 新建tsconfig.js文件。

    {
        "compilerOptions": {
            "outDir": "./dist",
            "sourceMap": true,
            "noImplicitAny": true,
            "module": "es6",
            "target": "es2015",
            "allowJs": false
        }
    }
  

• 新建webpack.config.js文件

    const path = require("path");
  
    module.exports = {
        entry: {
            index: "./src/index.ts"
        },
        devtool: "inline-source-map",
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: "ts-loader",
                    exclude: /node_modules/
                }
            ]
        },
        resolve: {
            extensions: [".ts", ".tsx", ".js"]
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist')
        }
    };
  

• 新建文件/src/index.ts

console.log("test");

• 执行webpack命令

webpack

• 确认结果：确认是否新生成了如下目录结构和文件

    |---dist
          |---index.js
  

参考：https://webpack.js.org/guides/typescript/

[zhouyun163]

✔️ import * as xxx from "xxx"

参考：http://ju.outofmemory.cn/entry/247940

[zhouyun163]

✔️ npm包

• morgan:
  HTTP request logger middleware for node.js.
  https://www.npmjs.com/package/morgan

• express-handlebars:
  A Handlebars view engine for Express which doesn't suck.
  https://www.npmjs.com/package/express-handlebars

• body-parser:
  Parse incoming request bodies in a middleware before your handlers
  https://www.npmjs.com/package/body-parser

• cookie-parser:
  Parse Cookie header and populate req.cookies with an object keyed by the cookie names.
  https://www.npmjs.com/package/cookie-parser

[zhouyun163]

✔️ [ts] 找不到名称“require”

问题

解决办法

安装@types/node

npm install @types/node --save

参考：http://www.guanggua.com/question/41687644-cannot-find-name-require-in-typescript.html

[zhouyun163]

✔️ path.join()和path.resolve()区别

参考：https://zhuanlan.zhihu.com/p/27798478

[zhouyun163]

✔️ code . 不能启动vscode

问题

在mac系统下不认识code命令

bogon:test-snippets zhouyun$ code .
-bash: code: command not found

解决办法

参考：https://stackoverflow.com/questions/29955500/code-not-working-in-command-line-for-visual-code-studio-on-osx-mac

After installation, launch VS Code. Now open the Command Palette (⇧⌘P) and type shell command to find the Shell Command: Install 'code' command in PATH command.

[zhouyun163]

✔️ 设置vscode关联特殊后缀使用制定语言编辑器打开

"files.associations": {
    "*.mysuffix":"html"
}

在vscode中做如上设置之后，以mysuffix后缀打开的文件，都会被使用html语言编辑器打开，同时也就有了html编辑器的联想着色等能力。

[zhouyun163]

✔️ 使用svg path画图形

示例代码，画了1个三角形 参考

<svg width="100%" height="100%" style="overflow: visible;" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M250 150 L150 350 L350 350 Z" />
</svg>

[zhouyun163]

✔️ angular2～ 阻止事件冒泡

$event.stopPropagation()

<button class="delete" (click)="delete(hero); $event.stopPropagation()">x</button>