web开发常识

.gitignore规则

• 匹配模式前 / 代表项目的根目录
• 匹配模式最后加 / 代表是目录
• 匹配模式前加！代表取反
• *代表任意个字符
• ？匹配任意一个字符
• **匹配多级目录

.npmignore、pre-commit

可以通过配置pre-commit在提交代码的时候，会先执行script中对应的命令；如果未报错则提交代码成功

{
    "name": "NodeJs_study",
    "version": "0.0.1",
    "dependencies": {},
    "devDependencies": {
        "eslint": "^4.14.0",
        "eslint-plugin-react": "^7.5.1",
        "pre-commit": "^1.2.2"
    },
    "scripts": {
        "lint": "eslint .",
        "fix": "eslint --fix"
    },
    "pre-commit": [
        "fix",
        "lint"
    ]
}

.editorconfig

• root = true 指定规则的顶层
• end_of_line = lf 指定Linux风格的空格

ESLint、.eslintignore

• eslint --init 初始化配置

  
  eslint编辑器中提示配置

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "script"
    },
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "warn",
            "unix"
        ],
        //是否单引号
        "quotes": [
            "error",
            "single"
        ],
        //是否加分号
        "semi": [
            "error",
            "never"
        ],
        "no-console": ["error", {
            "allow": ["info", "warn", "error"]
        }]
    }
};

Mac系统kill进程

kill

模板引擎之handlebars

const handleBars = require('handlebars')
const tplPath = path.join(__dirname, '../template/dir.tpl')
const source = fs.readFileSync(tplPath)
const template = handleBars.compile(source.toString())
//导入
const data = {
    title: path.basename(filePath),
    dir,
    files: files.map(file => {
        return {
            icon: mime(file),
            file
        }
    })
}
res.end(template(data))
//模板输出
{{#each files}}
    <a href="{{../dir}}/{{file}}">【{{icon}}】{{file}}</a>
{{/each}}

MIME运用

const mime = require('mime')
const path = require('path')

module.exports = function (fileName) {
    const ext = path.extname(fileName)
    return ext? mime.getType(ext):mime.getType('txt')
}

res.setHeader('Content-Type', `${mime(filePath)};charset=utf-8`)

NPM发布

//在package.json中添加配置
"name": "jtr354-anywhere",
"main": "src/app.js",
"bin": {
    "jtr354-anywhere": "bin/jtr354-anywhere"
},

//添加bin目录及文件
#! /usr/bin/env node
require('../src/index')

//添加入口文件
const yargs = require('yargs')
const Server = require('./app')
const argv = yargs
    .usage('anywhere [options]')
    .option('p',{
        alias:'port',
        describe:'端口号',
        default: 9529
    })
    .option('h',{
        alias:'hostname',
        describe:'host',
        default:'127.0.0.1'
    })
    .option('d',{
        alias:'root',
        describe:'root path',
        default:process.cwd()
    })
    .version()
    .alias('v','version')
    .help()
    .argv

const server = new Server(argv)
server.start()

//包装app.js
// npm i -g supervisor
const http = require('http')
const conf = require('./config/defaultConfig')
const chalk = require('chalk')
const path = require('path')
const route = require('./handle/route')
const openUrl = require('./handle/openUrl')

class Server {
    constructor(config) {
        this.conf = Object.assign({}, conf, config)
    }

    start() {
        const root = this.conf.root
        const port = this.conf.port
        const hotName = this.conf.hotName

        const server = http.createServer((req, res) => {
            const url = decodeURIComponent(req.url)
            const filePath = path.join(root, url)
            route(req, res, filePath, this.conf)
        })

        server.listen(port, hotName, () => {
            const adr = `http://${hotName}:${port}`
            console.info(`Server start at ${chalk.green(adr)}`)
            openUrl(adr)
        })
    }
}
module.exports = Server

//chmod +x bin/jtr354-anydoor 打开权限--test
//最后保存代码-->登录npm-->发布
npm login
npm publish

参考：

• webstorm 常用插件集合