egg项目构建

官网:https://eggjs.org/zh-cn/
// 环境隔离
参考:https://www.yuque.com/egg/nodejs/node-multi-versioning
参考:https://blog.csdn.net/qq_32858649/article/details/99576159

配置本地ip

在这里插入图片描述

const os = require('os');
//获取本机ip
function getIpAddress() {
     /**os.networkInterfaces() 返回一个对象,该对象包含已分配了网络地址的网络接口 */
  var interfaces = os.networkInterfaces();
    for (var devName in interfaces) {
      var iface = interfaces[devName];
       for (var i = 0; i < iface.length; i++) {
              var alias = iface[i];
                if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                  return alias.address;
                }
          }
     }
}
const myHost = getIpAddress();
console.log(myHost);
module.exports = appInfo => {
  /**
   * built-in config
   * @type {Egg.EggAppConfig}
   **/
  const config = exports = {};

  //配置端口信息
  config.cluster = {
    listen:{
      port:7001,
      hostname:myHost
    }
  };

  return {
    ...config
  };
};

参考:https://blog.csdn.net/weixin_43352901/article/details/107927661

我是使用脚手架搭建,内容参照egg官网,只是把我自己搭建的过程记录下来

egg

创建脚手架
先创建文件夹、进入文件夹

mkdir egg-example && cd egg-example

进行脚手架的搭建

npm init egg --type=simple

安装依赖

npm i

启动看看

npm run dev

文件结构
创建出来的目录

  |-controller\ 用于解析用户的输入,处理后返回相应的结果
  |

app --|-public\ 用于放置静态资源
|
|-router.js 用于配置 URL 路由规则
controller
这里的文件与router相对应,也是网页输出的地方,这样就有一个简单的项目流程了

大概的流程是

写路径 => 在controller里创建对应的js => js输出内容到网页

刚刚创建的项目,内容非常的少,现在我们一点点补充内容

ejs 模板输出
我们现在的输出手段太简陋了,现在用我们最喜欢的html来输出,这里我选择的是ejs模板,这也是egg支持的

这里参考初始化 egg+ejs 项目

安装 egg-view-ejs

npm install egg-view --save

npm install egg-view-ejs --save

配置 egg-view-ejs
进入 config/plugin.js,将文件的内容清空,修改成下面这样

// 支持ejs

exports.ejs = {
  enable: true,
  package: 'egg-view-ejs',
};

这里我发现,有严格模式,于是我想把严格模式关掉,egg脚手架自带了一些规则,在.eslintrc文件里,我习惯用我这套规则,如果要添加的话,可以参考.eslintrc.js相关配置

{
  "parserOptions": {
      "ecmaVersion": 2017
  },
  "env": {
      "es6": true,
  },
}

现在继续ejs的修改,在 config/config.default.js下添加配置

// 支持ejs

  config.view = {
    defaultViewEngine: 'ejs',
    mapping: {
      '.ejs': 'ejs',
    },
  };

写ejs
开始写之前,先在app文件夹下创建view文件夹

新建home.ejs

ejs的书写方式,参考ejs官网

渲染的方法,在我们的输出入口controller里设置,egg内置了ejs的渲染方式,在ctx对象里的render

async index() {
const ctx = this.ctx;
await ctx.render(‘home.ejs’, { data:要传的参数 });
}
render的第二个参数,是对象,可以将一些数据放到ejs里用

这里默认是在view文件夹下,如果想链接到view\pc\index.ejs,就是’pc\index.ejs’

现在的流程变成

设置url => 在controller里设置出口口 => 写ejs => 在出口将ejs输出

ejs扩展(helper)
helper,是创建在app\extend\helper.js 里的js,在这里定义的函数,可以直接在ejs里引用

比如我在helper.js里定义一个函数

module.exports = {
  stringAdd(str) {
    return str + " + helper";
  }
}

这时,ejs里可以这样写

<%= helper.stringAdd('测试') %>

页面展示为

测试 + helper
知识扩展:规范
controller只是设置数据和输出口的地方,egg支持我们将代码规范起来

context(逻辑)
egg支持我们将逻辑区分出来,我们可以在app\extend里创建context.js,这里的函数,会被合并到egg内置的ctx对象里

service(服务)
egg支持我们将网络服务区分出来,我们可以在app\service里创建js,js里的函数,会被合并到egg内置的ctx对象的service对象里

例子
我们在context.js里写函数

app\extend\context.js

module.exports = {
  cs() {
    return '测试';
  }
};

我们在service\里写函数

app\service\home.js

const Server = require('egg').Service;

class HomeServer extends Server {
  /**
   * 测试用
   * @param {String}} str
   */

  stingAdd(str) {
    return str + '后手添加';
  }

}

module.exports = HomeServer;

然后,我们在controller里使用这些逻辑

controller\home.js

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    const css = ctx.cs();
    const assignData = {
      title: 'egg',
      cs: css,
    };
    assignData.csTitle = this.service.home.stingAdd('?')
    await ctx.render('home.ejs', assignData);
  }
}

module.exports = HomeController;

ejs上的代码

<%= helper.stringAdd(cs) %>

<%= csTitle %>

最后,页面输出的是

测试 + helper
?后手添加

js的使用
差不多到了用js的时候了,egg有专门的静态文件存放地,我们把js等静态文件建在public文件夹下

egg内置了自动继承静态资源配置

使用方法
如下所示静态资源,我们在html里可以通过"/public/index.js"进行访问

app/public
|–index.js
egg的静态资源管理还有一些默认配置。参考资料

打包
只是简单的引用js肯定不行,我们要对js进行打包处理。打包js、多环境打包js

获取hash后缀的js
打包好的hash后缀js如何使用?

创建引用路径存放地
为了能正确的引用到对应的js,我们要在打包js的时候,把js的引用路径保存下来

我们在public下,建个scripts文件夹,放置js的引用路径

app/bublic
|-- script
编写插件
插件能让我们在webpack运行的过程中插入一些程序,这次我们要在打包完js的时候生成对应的引用路径。插件是什么、编写插件

首先,先创建插件js,这次我在webpack文件夹下创建一个插件plugins文件夹,放置一些插件js

app/public
      |-- webpack
            |-- plugins
                  |-- jsScriptsPlugins.js
jsScriptsPlugins.js就是我们创建的插件js,内容如下

const fs = require('fs');
const path = require('path');

var JsScriptsPlugins = function(){

}

JsScriptsPlugins.prototype.apply = function(compiler){
  compiler.plugin("emit", function(compilation, done){ // emit 事件
    for(let fileName in compilation.assets){ // 获取输出的静态资源并遍历
      var name = fileName.split('.')[0];  // 获取js前缀
      var template = `module.exports = { // 设置内容模板
        'path': ['public/release/${fileName}']}` 
      var filePath = path.join(__dirname, "../../scripts/") + name + ".js";// 引入路径的存放js
      fs.writeFile(filePath, template, 'utf8', function(error){ // 写入文件
        if(error){
          console.log(error)
        }
        console.log(`\x1B[36m写入${filePath}成功\x1B[0m`);
        console.log(`\x1B[36m内容为${template}\x1B[0m`);
        console.log('\n');
      });
    }
    done();
  });
}


module.exports = JsScriptsPlugins;

Webpack 会调用 BasicPlugin 实例的 apply 方法给插件实例传入 compiler 对象。compiler 钩子

在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,这次我们用的是emit事件

emit 事件
生成资源到 output 目录之前。

compilation.assets
存放当前所有即将输出的资源

fs.writeFile()
文件写入:fs.writeFile(‘文件路径’,‘要写入的内容’,[‘编码’],‘回调函数’);

我们在emit事件中,获取到了即将打包的js资源,因为是对象类型,我们用for…in进行遍历操作。

遍历的操作流程大概为

获取js名 => 获取js前缀 => 设置内容模板 => 设置对应的存放路径js => 将设置好的内容写入文件里

模板内容是根据打包后,输出的地址来设置的

【注】这里有个需要注意的,emit事件的第二个参数done,这是个通知函数,处理完毕后执行done,以通知 Webpack,如果不执行done,运行流程将会一直卡在这不往下执行

引用插件
插件设置好了,现在开始引人插件,回到webpack文件里来

// 引入js

const jsScriptsPlugin = require('./plugins/jsScriptsPlugins');

module.exports = {
  entry: entry,
  output: {
    filename: "[name].[chunkhash].js",
    path: outputPath,
    publicPath: path.resolve(__dirname, "../release")
  },
  plugins: [
    new jsScriptsPlugin(),  // 加入插件
  ]
}

这样插件就生效了

不同环境引用js
我们现在打包了两种环境的js,如何区分引用才好呢?

我是简单的在context.js里添加函数来获取

module.exports = {
  getProdScript(name){
    return require('../public/scripts/' + name)['path'];
  },
  getDevScript(name){
    return 'public/dist/' + name + '.js';
  }
}

分别返回不同环境,相同js的路径,然后我们在controller里,将路径作为数据传入到ejs,ejs再进行引入

// app/public/controller/home.js
const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    await ctx.render('home.ejs',{script: ctx.getDevScript('a')});
  }
}

module.exports = HomeController;

// app/public/view/home.ejs

<script src="<%= script %>"></script>

可配置打包文件
我们在之前的打包入口配置中,都是已写死的方法来做的,现在我们要把打包入口配置,进行优化

配置文件
先建一个文件夹config,用来放配置文件,文件配置按下面的来

app/public/webpack/config/a.js

const path = require('path');

module.exports = {
  on: 1,  // 是否需要打包
  scriptRules: [
    {
      enable: true, // 为了支持配置多个文件,这里再细化处理了,判断这个js是否需要打包
      name: 'a',  // 打包入口配置键
      entry: path.resolve(__dirname, '../../a.js')  // 打包入口配置值
    },
  ]
}

生成入口配置
再在webpack下创建webpack.settings.js文件

app/public/webpack/webpack.settings.js

老样子,先上代码

const fs = require('fs');
const path = require('path');
const confPath = path.join(__dirname, "./config");

function getEnrty (confPath) {
  if(fs.existsSync(confPath)){  // 判断路劲是否存在
    var files = fs.readdirSync(confPath); // 获取路径下的所有文件,返回数组
    var fileArray = [];
    files.forEach(file =>{
      var filePath = path.join(confPath, file); // 配置文件的路径
      var stat = fs.statSync(filePath); // 获取文件信息
      var isFile = stat.isFile(); // 判断是否是文件
      if(isFile){ //  如果是
        fileArray.push(path.join(confPath, file));  // 存入数组
      }
    })
// 遍历文件数组,提取文件的内容,判断on是否为1,将需要打包的内容重新放入一个数组
var configModules = fileArray.map(require).filter(item => item.on === 1);
var entry = {};
    // 遍历需要打包的文件配置,再细化,判断scriptRules是否需要打包,最后将需要打包的文件配置按入口要求,设置到对象里
    configModules.forEach(config => {
      config['scriptRules'].forEach(scriptRules => {
        if(scriptRules.enable){
          entry[scriptRules['name']] = scriptRules['entry']
        }
      })
    });
    return entry; // 返回入口配置
  }else{
    return {};
  }
}

entry = getEnrty(confPath);

module.exports = entry;

先讲下这个文件作用,这个js会把config下的配置文件内容全部读取,然后根据配置,分辨哪些js需要打包,哪些不需要,最后返回一个对象,用于打包入口

引用入口配置
引用这个配置就很简单了

在webpack打包js里,直接引用

const entry = require(’./webpack.settings’); // 引入配置对象

entry: entry, // 主文件入口,加上即可用
这个方法,开发环境和生成环境打包都可以用,十分方便,统一管理,统一配置

app.js,服务启动时执行
在项目根目录下创建app.js文件,暴露一个函数,项目启动时会执行这个函数

// app.js
module.exports = function () {
  console.log("服务启动")
}

这样,每次我们项目启动的时候,都会看到"服务启动"

作者:暮光丶
链接:https://www.jianshu.com/p/a2c7e5197b0a
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值