四月八日

const koa = require('koa');

const app = new koa();

const m1 = async (ctx, next) => {
  console.log(1);
  await next();
  console.log(2);
}

const m2 = async (ctx, next) => {
  console.log(3);
  await next();
  console.log(4);
}
const m3 = async (ctx, next) => {
  console.log(5);
  await next();
  console.log(6);
}

app
  .use(m1)
  .use(m2)
  .use(m3)

app.listen(3000)

const koa = require('koa');
const Router = require('koa-router')

const app = new koa();
const router = new Router();

const m1 = async (ctx, next) => {
  // 应用级中间件最先被访问
  console.log('应用级中间件');
  //通过next进入路由级中间件
  await next();
  if (ctx.status == 404) {
    ctx.body = '404'
  }
}
// 路由级中间件会按照顺序访问
router.get('/', async (ctx, next) => {
  console.log('路由级中间件1');
  await next()
})

router.get('/', async (ctx, next) => {
  console.log('路由级中间件2');
  ctx.body = '路由'
})

app.use(router.routes());

app
  .use(m1)

app.listen(3000)

npm i --save-dev html-webpack-plugin@next //webpack5

plugins: [
  new HtmlWebpackPlugin({
    template:'**.html'
  })
]

yarn add -D sass-node less-loader css-loader style-loader

{
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
              loader: 'css-loader',
              options: {
                  minimize: false, //压缩css代码, 默认false
                  import: true, //禁止或启用@import, 默认true
                  url: true, //控制url/image-set的解析，会处理成require引入
              }
          }
        , 'sass-loader']
      }
    ]
  },
}

yarn add -D url-loader file-laoder

// 小图片以bash64的方式输出
// 可以处理通过import引入的样式中的图片，js文件中引入的图片文件
// 如果图片大于指定大小会默认交给file-loader处理
// file-loader 会使用options中的配置
{
  test: /\.(png|jpe?g|gif)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 5 * 1024,
        outputPath: 'assets',
        name: '[hash:8].[ext]',
      }
    }
  ]
},
// 处理html中的图片
// 把html字符串中的图片引变成require的形式，
// 最终还是需要使用file-loader 和 url-loader来处理
// 如果生成的src是[object Module]需要关闭，url-loader的模块化规范
{
  test: /\.html$/i,
  use: [{
    loader: 'html-loader',
  }]
},

{
  // exclude:/\.xx$/
  test: /\.(ttf|eot|svg|woff|woff2)$/,
  loader:'file-loader',
  options:{
    name:'[path][name].[ext]'
  }
  
}

yarn add -D webpack-dev-server

devServer:{
  compress: true,
  contentBase: path.join(__dirname, 'dist'),
  open:true
}

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');


const config = require('./webpack.config.js');

const options = {
  contentBase: './dist',
  publicPath: '/',
  hot: true,
  writeToDisk: true,
  open: true
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

server.listen(9000, 'localhost', () => {
  console.log('dev server listening on port 9000');
});

var NotifierPlugin = require('friendly-errors-webpack-plugin');
var notifier = require('node-notifier');
var ICON = path.join(__dirname, 'icon.png');
 
new NotifierPlugin({
    onErrors: (severity, errors) => {
      if (severity !== 'error') {
        return;
      }
      const error = errors[0];
      notifier.notify({
        title: "Webpack error",
        message: severity + ': ' + error.name,
        subtitle: error.file || '',
        icon: ICON
      });
    }
  })
]

const fs = require("fs");
const path = require("path");
const vm = require("vm");

const handlerMap = {};
const hotsPath = path.join(__dirname, "hots");

// 加载文件代码 并 监听指定文件夹目录文件内容变动
const loadHandlers = async () => {
  // 遍历出指定文件夹下的所有文件
  const files = await new Promise((resolve, reject) => {
    //https://nodejs.org/dist/latest-v14.x/docs/api/fs.html#fs_fs_readdir_path_options_callback
    //异步读取指定目录下的文件和文件夹，返回一个数组
    fs.readdir(hotsPath, (err, files) => {
      if (err) {
        reject(err);
      } else {
        resolve(files);
      }
    });
  });
  // 初始化加载所有文件 把每个文件结果缓存到handlerMap变量当中
  for (let f in files) {
    handlerMap[files[f]] = await loadHandler(path.join(hotsPath, files[f]));
  }

  // 监听指定文件夹的文件内容变动
  await watchHandlers();
};

// 监视指定文件夹下的文件变动
const watchHandlers = async () => {
  // 这里建议用chokidar的npm包代替文件夹监听 
  // 监听所有子文件夹
  fs.watch(hotsPath, { recursive: true }, async (eventType, filename) => {
    // 获取到每个文件的绝对路径 
    // 包一层require.resolve的原因，拼接好路径以后，它会主动去帮你判断这个路径下的文件是否存在
    //使用require.resolve函数查询模块文件名时并不会加载该模块。
    const targetFile = require.resolve(path.join(hotsPath, filename));
    // 使用require加载一个模块后，模块的数据就会缓存到require.cache中，下次再加载相同模块，就会直接走require.cache
    // 所以我们热加载部署，首要做的就是清除require.cache中对应文件的缓存
    const cacheModule = require.cache[targetFile];
    // 去除掉在require.cache缓存中parent对当前模块的引用，否则会引起内存泄露，具体解释可以看下面的文章
	// 《记录一次由一行代码引发的“血案”》https://cnodejs.org/topic/5aaba2dc19b2e3db18959e63
	// 《一行 delete require.cache 引发的内存泄漏血案》https://zhuanlan.zhihu.com/p/34702356
    if (cacheModule.parent) {    
        cacheModule.parent.children.splice(cacheModule.parent.children.indexOf(cacheModule), 1);
    }
    // 清除指定路径对应模块的require.cache缓存
    require.cache[targetFile] = null;

    // 重新加载发生变动后的模块文件，实现热加载部署效果，并将重新加载后的结果，更新到handlerMap变量当中
    const code = await loadHandler(targetFile)
    handlerMap[filename] = code;
    console.log("热部署文件：", filename, "，执行结果：", handlerMap);
  });
};

// 加载指定文件的代码
const loadHandler = filename => {
  return new Promise((resolve, reject) => {
    //https://nodejs.org/dist/latest-v14.x/docs/api/fs.html#fs_fs_readfile_path_options_callback
    //读取文件中的内容 默认返回buffer
    //当目录为文件夹时抛出错误
    fs.readFile(filename, (err, data) => {
      if (err) {
        resolve(null);
      } else {
        try {
          // 使用vm模块的Script方法来预编译发生变化后的文件代码，检查语法错误，提前发现是否存在语法错误等报错
          new vm.Script(data);
        } catch (e) {
          // 语法错误,编译失败
          reject(e);
          return;
        }
        // 编译通过后，重新require加载最新的代码
        resolve(require(filename));
      }
    });
  });
};

loadHandlers()

#!/usr/bin/env node

const shell = require('shelljs')
const chokidar = require('chokidar')
const home = require('user-home')
const path = require('path')

const WORKSPACE_PATH = path.resolve(home, 'Workspace');

const expectPath = path.join(__dirname, './expect.exp')
const to = 'root@144.xxx.xxx.92:/home/backup'

chokidar
  .watch('./index.js', {
    ignored: (path) => path.includes('node_modules') || path.includes('.git')
  })
  .on('all', (event, path) => {
    console.log(event, path);
    shell.exec(`expect ${expectPath} ${path} ${to}`)
  }); 

#!/usr/bin/env node

const logger = require('../lib/logger')
const request = require('request')
const chalk = require('chalk')

// 监听ctrl + c退出事件
process.on('exit', () => {
  console.log()
})

//请求模板使用到的包
// 如果没有报错，拼接包的名字 返回上面的列表
request({
  url: 'https://api.github.com/users/vuejs-templates/repos',
  headers: {
    'User-Agent': 'vue-cli'
  }
}, (err, res, body) => {
  if (err) logger.fatal(err)
  const requestBody = JSON.parse(body)
  if (Array.isArray(requestBody)) {
    console.log('  Available official templates:')
    console.log()
    requestBody.forEach(repo => {
      console.log(
        '  ' + chalk.yellow('★') +
        '  ' + chalk.blue(repo.name) +
        ' - ' + repo.description)
    })
  } else {
    console.error(requestBody.message)
  }
})

#!/usr/bin/env node

const download = require('download-git-repo')
const program = require('commander')
const exists = require('fs').existsSync
const path = require('path')
const ora = require('ora')
const home = require('user-home')
const tildify = require('tildify')
const chalk = require('chalk')
const inquirer = require('inquirer')
const rm = require('rimraf').sync
const logger = require('../lib/logger')
const generate = require('../lib/generate')
const checkVersion = require('../lib/check-version')
const warnings = require('../lib/warnings')
const localPath = require('../lib/local-path')

const isLocalPath = localPath.isLocalPath
const getTemplatePath = localPath.getTemplatePath

program
  .usage('<template-name> [project-name]')
  .option('-c, --clone', 'use git clone')
  .option('--offline', 'use cached template')

/**
 * Help.
 */

program.on('--help', () => {
  console.log('  Examples:')
  console.log()
  console.log(chalk.gray('    # create a new project with an official template'))
  console.log('    $ vue init webpack my-project')
  console.log()
  console.log(chalk.gray('    # create a new project straight from a github template'))
  console.log('    $ vue init username/repo my-project')
  console.log()
})

/**
 * Help.
 */

function help () {
  program.parse(process.argv)
  if (program.args.length < 1) return program.help()
}
help()

/**
 * Settings.
 */

let template = program.args[0]
const hasSlash = template.indexOf('/') > -1
const rawName = program.args[1]
const inPlace = !rawName || rawName === '.'
const name = inPlace ? path.relative('../', process.cwd()) : rawName
const to = path.resolve(rawName || '.')
const clone = program.clone || false

const tmp = path.join(home, '.vue-templates', template.replace(/[\/:]/g, '-'))
if (program.offline) {
  console.log(`> Use cached template at ${chalk.yellow(tildify(tmp))}`)
  template = tmp
}

/**
 * Padding.
 */

console.log()
process.on('exit', () => {
  console.log()
})

if (inPlace || exists(to)) {
  inquirer.prompt([{
    type: 'confirm',
    message: inPlace
      ? 'Generate project in current directory?'
      : 'Target directory exists. Continue?',
    name: 'ok'
  }]).then(answers => {
    if (answers.ok) {
      run()
    }
  }).catch(logger.fatal)
} else {
  run()
}

/**
 * Check, download and generate the project.
 */

function run () {
  // check if template is local
  if (isLocalPath(template)) {
    const templatePath = getTemplatePath(template)
    if (exists(templatePath)) {
      generate(name, templatePath, to, err => {
        if (err) logger.fatal(err)
        console.log()
        logger.success('Generated "%s".', name)
      })
    } else {
      logger.fatal('Local template "%s" not found.', template)
    }
  } else {
    checkVersion(() => {
      if (!hasSlash) {
        // use official templates
        const officialTemplate = 'vuejs-templates/' + template
        if (template.indexOf('#') !== -1) {
          downloadAndGenerate(officialTemplate)
        } else {
          if (template.indexOf('-2.0') !== -1) {
            warnings.v2SuffixTemplatesDeprecated(template, inPlace ? '' : name)
            return
          }

          // warnings.v2BranchIsNowDefault(template, inPlace ? '' : name)
          downloadAndGenerate(officialTemplate)
        }
      } else {
        downloadAndGenerate(template)
      }
    })
  }
}

/**
 * Download a generate from a template repo.
 *
 * @param {String} template
 */

function downloadAndGenerate (template) {
  const spinner = ora('downloading template')
  spinner.start()
  // Remove if local template exists
  if (exists(tmp)) rm(tmp)
  download(template, tmp, { clone }, err => {
    spinner.stop()
    if (err) logger.fatal('Failed to download repo ' + template + ': ' + err.message.trim())
    generate(name, tmp, to, err => {
      if (err) logger.fatal(err)
      console.log()
      logger.success('Generated "%s".', name)
    })
  })
}

var findRepeatNumber = function (nums) {
  var map = new map();
  for (let n of nums) {
    if (map[n]) return n;
    map[n] = true
  }
};

var findRepeatNumber = function (nums) {
  var index = 0;
  while (nums[index] !== undefined) {
    var temp = nums[index];
    if (temp === index) { index += 1; continue };
    if (nums[temp] === temp) return temp;
    nums[index] = nums[temp];
    nums[temp] = temp;
  }
  return -1;
};

process.env.NODE_ENV

const glob = require('glob')
const { argv } = require('yargs')
const path = require('path')
const files = glob.sync("./src/web/views/**/*.js")
const htmls = glob.sync("./src/web/views/**/*.art")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const CustomInjectPlugin = require('./src/service/config/CustomInjectPlugin');
const mode = argv.mode;
if (!files.length) return;

const entry = files.reduce((entry, path) => {
  const match = path.match(/(\w+)\/(\w+)\.js$/);
  entry[match[1]] = match.input;
  return entry;
}, {});

const htmlPlugin = htmls.map(path => {
  const match = path.match(/(\w+)\/(\w+)\.art$/);
  return new HtmlWebpackPlugin({
    filename: `${match[1]}.art`,
    template: match.input,
    hash: true,
    chunks: ['runtime', match[1]],
    inject: false
  })
})
module.exports = {
  entry,
  mode,
  output: {
    filename: '[name]_[contentHash].js',
    path: __dirname + '/dist'
  }
  plugins: [
    new CleanWebpackPlugin(),
    ...htmlPlugin,
    new CustomInjectPlugin()
  ],
  optimization: {
    runtimeChunk: {
      name: 'runtime'
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src/web')
    }
  }
}

const HtmlWebpackPlugin = require('html-webpack-plugin');
const pluginName = 'CustomInjectPlugin';

class CustomInjectPlugin {
  js = ''
  apply(compiler) {
    compiler.hooks.compilation.tap('pluginName', (compilation) => {
      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
        pluginName,
        (data, cb) => {
          const { assets: { js } } = data;
          this.js = js.map(src => src.replace('@', './')).join('');
          cb(null, data)
        }
      )
      // Static Plugin interface |compilation |HOOK NAME | register listener 
      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
        pluginName, // <-- Set a meaningful name here for stacktraces
        (data, cb) => {
          const { html } = data;
          data.html = html.replace(/!script!/, this.js);
          this.js = ''
          cb(null, data)
        }
      )
    })
  }
}

module.exports = CustomInjectPlugin;

const { series, src, dest } = require('gulp');
var plugins = require('gulp-load-plugins')();
const replace = require('@rollup/plugin-replace');

const jspath = './src/service/**/*.js';

// 开发环境 监听文件变化, 处理模块化规范
function es6(cb) {
  plugins.watch(jspath, { ignoreInitial: false },
    function () {
      return src(jspath)
        .pipe(plugins.babel({
          plugins: [
            "@babel/plugin-transform-modules-commonjs",
            "@babel/plugin-transform-runtime"
          ]
        }))
        .pipe(dest('dist'))
    }
  )
    .pipe(dest('build'));
  return cb()
}

function es6dev() {
  return src(jspath)
    .pipe(plugins.babel({
      ignore: ['./src/service/config/index.js'],
      plugins: [
        //处理模块化规范
        "@babel/plugin-transform-modules-commonjs",
        "@babel/plugin-transform-runtime"
      ]
    }))
    .pipe(dest('dist'))
}

function codeClean(cb) {
  return src(jspath)
    // transform the files here.
    .pipe(plugins.rollup({
      // any option supported by Rollup can be set here.
      input: './src/service/config/index.js',
      output: {
        format: 'cjs'
      },
      plugins: [
        replace({
          'process.env.NODE_ENV': JSON.stringify('production')
        })
      ]
    }))
    .pipe(dest('dist'))
}

exports.dev = series(es6);
exports.default = series(es6dev, codeClean);