yeoman学习（二）

最新推荐文章于 2024-05-05 00:20:36 发布

Strawberry96

最新推荐文章于 2024-05-05 00:20:36 发布

阅读量206

点赞数

分类专栏： yeoman 文章标签：前端

本文链接：https://blog.csdn.net/zhangying1996/article/details/108345114

版权

yeoman 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

按照下面的目录，创建 templates/index.html

toy-tool目录

├───package.json
├───generators
│   └───app
│  		└───index.js
│   	└───templates
│   		└───index.html
├───package-lock.json
├───node_modules

/* index.html */

<html>
  <head>
    <title><%= title %></title>
  </head>
</html>

// index.js

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
    // The name `constructor` is important here
    constructor(args, opts) {
        // Calling the super constructor is important so our generator is correctly set up
        super(args, opts);
    }

    collecting() {
        this.log('collecting');
    }

    creating() {
        this.fs.copyTpl(
            this.templatePath('index.html'),
            this.destinationPath('public/index.html'), {
                title: 'Templating with Yeoman'
            }
        );
    }
};

yo toytool  //yo-tool 下执行命令

这样generators的同级中生成了public/index.htmlyn

然后尝试在tt-enample中执行yo toytool，生成public/index.html

成功之后，把public文件都删除，只是用于测试代码是否走通

修改index.js 中的creating() ，安装依赖

// index.js

creating() {
        this.npmInstall([
            'webpack',
            'webpack-cli',
            'webpack-dev-server'
        ], { 'save-dev': true });
}

tt-example >  yo toytool

新建templates/package.json

// package.json

{
    "name": "<%= title %>",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Strawberry",
    "license": "MIT"
  }

// app/index.js

	creating() {
        this.fs.copyTpl(
            // 当前文件路径
            this.templatePath('package.json'),
            // 目标文件路径
            this.destinationPath('package.json'), {
                title: 'Templating with Yeoman'
            }
        );
        this.npmInstall([
            'webpack',
            'webpack-cli',
            'webpack-dev-server',
        ], { 'save-dev': true });
    }

yo toytool

在tt-example 中生成package.json

安装更多的依赖

// install
 this.npmInstall([
    'webpack',
    'webpack-cli',
    'webpack-dev-server',
    'babel-loader',
    '@babel/core',
    '@babel/preset-env',
    '@babel/plugin-transform-react-jsx',
    'mocha',
    'nyc',
    '@istanbuljs/nyc-config-babel',
    'babel-plugin-istanbul'
], { 'save-dev': true });

// templates/package.json

    "scripts": {
      "test": "mocha",
      "coverage": "nyc mocha",
      "start": "webpack-dev-server",
      "build": "webpack"
    }

copy三份js文件

gesture.js

animation.js

createElement.js

新建main.js

//main.js 

import {createElement, Text, Wrapper} from "../lib/createElement";

let component =<div>Hello world!</div>

component.mountTo(document.body)

toy-tool目录

├───package.json
├───generators
│   └───app
│  		└───index.js
│   	└───templates
│   		└───index.html
│   		└───package.json
│   		└───gesture.js
│   		└───animation.js
│   		└───createElement.js
│   		└───main.js
├───package-lock.json
├───node_modules

节点

// index.html

<html>
  <head>
    <title></title>
    <script src="./main.js" type="module"></script>
  </head>
</html>

// index.js / creating() 

        this.fs.copyTpl(
            this.templatePath('index.html'),
            this.destinationPath('src/index.html')
        );

templates中新建文件 webpack.config.js

module.exports = {
    entry: './src/main.js',
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [["@babel/plugin-transform-react-jsx", {pragma: "createElement"}]]
                    }
                }
                
            }
        ]
    },
    mode:'development',
    optimization: {
        minimize: false
    }
};

// index.js / creating() 

		this.fs.copyTpl(
            this.templatePath('webpack.config.js'),
            this.destinationPath('webpack.config.js')
        )

        //因为createElement中使用了gesture.js，所以gesture也要copy到tt-example中

	    this.fs.copyTpl(
            this.templatePath('gesture.js'),
            this.destinationPath('lib/gesture.js')
        )

yo toytool
webpack  // 生成了dist/main.js

再改index.html

// index.html

<html>
  <head>
    <title></title>
    <script src="../dist/main.js" type="module"></script>
  </head>
</html>

webpack-dev-server //启动服务

修改一下templates/package.json 中的 name

// templates/package.json

{
	"name": "temp-name",
}

yo toytool
npm start // == webpack-dev-server 因为在package.json里配置了对应的启动命令

刚刚使用的是dist里的main.js，现在不使用 dist 中的文件，先在 templates/webpack.config.js 中加上devServer，index.html 中修改路径。

// templates/webpack.config.js 
// add

devServer: {
    open: true,
    compress: false,
    contentBase: "./src"
},

// index.html

<html>
  <head>
    <title></title>
    <script src="./main.js" type="module"></script>
  </head>
</html>

yo toytool

npm start

html-webpack-plugin

https://www.webpackjs.com/plugins/html-webpack-plugin/

// index.js  加上需要依赖的插件 html-webpack-plugin

this.npmInstall([
    'html-webpack-plugin',
], { 'save-dev': true });

// templates/webpack.config.js
// add
plugins: [
    new (require('html-webpack-plugin'))
]

查看tt-example中的dist/index.html是否可以运行。能运行就说明build成功了。

建议：初始化工具不需要控制版本，如果是插件就按照最新版本来编写。

Strawberry96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
yeoman学习（二）

按照下面的目录，创建 templates/index.htmltoy-tool目录├───package.json├───generators│ └───app│ └───index.js│ └───templates│ └───index.html├───package-lock.json├───node_modules/* index.html */<html> <head> <title><
复制链接

扫一扫