前端工程化（一）

最新推荐文章于 2024-08-01 22:18:51 发布

开森的小花

最新推荐文章于 2024-08-01 22:18:51 发布

阅读量323

点赞数

分类专栏： js高阶学习文章标签：前端 node.js webpack

本文链接：https://blog.csdn.net/qq_42349782/article/details/127310006

版权

js高阶学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是前端工程化？

前端工程化就是通过各种工具和技术，提升前端开发效率的过程。

首先，来了解一下是什么影响了开发效率？

1、项目上线前，代码需要压缩

2、用less增强css的编程性，但是浏览器不直接支持less

3、多人协作开发，代码风格无法统一

4、对es6+或css3新特性进行转换

YEOMAN通用性脚手架：可以通过generator创建不同项目的脚手架

二、生成一个自己的generator

1、创建一个generator项目的名称一定是gennerator-<name>

mkdir generator-vueNew

2、npm init构建项目

npm init -y

3、添加必要文件入口

4、下载yeoman为generator提供的基类

npm install yeoman-generator

做好准备工作后，我们思考脚手架的目的：首先要创建文件或者目录，其次要使yo命令可以运行起这个index.js的入口文件.

我们首先来解决第一个问题

在index.js文件中新增以下代码：

const Generator = require("yeoman-generator");

// 自己写的gennerator一定要继承自yeoman提供的yeoman-generator类
// 现在写的是node.js,没有import
module.exports = class extends Generator {
  writing() {
    //父类新封装的fs方法,可以创建文件fs.write(filepath,contents)
    // destinationPath(目录下或者/a/b)
    this.fs.write(this.destinationPath("temp.txt"), Math.random().toString());
  }
};

关于第二个问题，我们通过将当前项目挂载到全局命令下：npm link（卸载npm unlink）

5、使用模板及命令行交互

首先先实现，写出一个template模板，然后替换模板中的部分内容，生成新的文件

a、在app目录下构建template文件夹，并新建一个html文件，作为template

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <!-- 此处是EJS模板语法 -->
    <title>qiuqiu</title>
  </head>
  <body>
    <p>这是一个段落</p>
  </body>
</html>

b、在index.js写出下面的代码

const Generator = require("yeoman-generator");

// 自己写的gennerator一定要继承自yeoman提供的yeoman-generator类
// 现在写的是node.js,没有import
module.exports = class extends Generator {
  writing() {
    //父类新封装的fs方法,可以创建文件fs.write(filepath,contents)
    // destinationPath(目录下或者/a/b)
    this.fs.write(this.destinationPath("temp.txt"), Math.random().toString());

    // 父类封装的复制模板语法fs.copyTpl(被复制的template，复制出的文件output，template中需要被替换的部分)
    const tempLate = this.templatePath("index.html"); //templatePath:找到template下面的文件
    const outPut = this.destinationPath("new.html");
    const exchangeObj = { title: "qiuqiu" }; //template的title字段会变成qiuqiu
    this.fs.copyTpl(tempLate, outPut, exchangeObj);
  }
};

接下来，我们再来尝试实现交互，

交互主要是需要用promote来实现，命令行，在index.js中添加如下代码

const Generator = require("yeoman-generator");

// 自己写的gennerator一定要继承自yeoman提供的yeoman-generator类
// 现在写的是node.js,没有import
module.exports = class extends Generator {
  // 与命令行进行交互
  prompting() {
    // 是一个promise,一定要return
    return this.prompt([
      {
        type: "input",
        name: "title",
        message: "请输入项目名称",
        default: this.appname, //appname是用户的目录名
      },
    ]).then((userInput) => {
      // 获取用户的输入，并放在content的内容中
      this.userInput = userInput;
    });
  }

  writing() {
    //父类新封装的fs方法,可以创建文件fs.write(filepath,contents)
    // destinationPath(目录下或者/a/b)
    // this.fs.write(this.destinationPath("temp.txt"), Math.random().toString());

    // 父类封装的复制模板语法fs.copyTpl(被复制的template，复制出的文件output，template中需要被替换的部分)
    const tempLate = this.templatePath("index.html"); //templatePath:找到template下面的文件
    const outPut = this.destinationPath("new.html");
    const exchangeObj = this.userInput;
    this.fs.copyTpl(tempLate, outPut, exchangeObj);
  }
};

最后如果你有很多template内容，就像vue-cli生成的样子时，只需将template内容放入一个数组中，或者用fs进行遍历，然后写入即可！