前言

NodeJS这东西是不是学过了，之后感觉又像没学到什么东西？？？

我最近翻到了之前学习node的笔记，又结合了一些大佬的经验，这里把node系列相关的东西串联一下，分享给小伙伴们，顺便我自己也加深一下印象。

总共分为六篇

这里聊下 项目和构建分离 通过命令在项目中生成脚手架提供的模板

正文开始

项目和构建(脚手架)分离

1，为什么要项目和构建(脚手架)分离

独立性：项目开发人员专注项目开发，构建/脚手架开发人员专注于脚手架开发

安全性：不想让cli配置被别人乱改，就可以独立出去自己维护

2，核心思路

3，项目结构

cli/脚手架

项目demo

实现的效果

大白话解说：

• 1, 在react-demo项目下运行cluo-cli pack

• 2, 出现命令行交互界面

• 3, 用户选择dev

• 4, action触发，执行devRollup

• 5, rollup获取react-demo项目index.jsx为入口并对其进行打包

• 6, 输出dist目录到 react-demo项目

• 7, 启动服务默认打开react-demo项目index.html

• 8, 展示页面

4，命令行开发

5，rollup开发

bin/babel.config.js

module.exports = {
    configFile: false, // 禁止读取 babel 的配置文件
    babelrc: false,
    presets: [
        require.resolve('@babel/preset-env'),
        require.resolve('@babel/preset-react')
    ]
}

bin/rollup.js

const rollup = require('rollup');
const { devConfig } = require('./rollup.config');

async function devRollup(entry) {
  // 以 rollup.config.js 为打包配置，运行一下。
  const options = devConfig(entry);
  const bundle = await rollup.rollup(options);
  const { code, map } = await bundle.generate(options.output);
  await bundle.write(options.output);
}

module.exports = { devRollup };

bin/rollup.config.js

const path = require('path');

const babel = require('rollup-plugin-babel');
const livereload = require('rollup-plugin-livereload');
const serve = require('rollup-plugin-serve');

const bableConfig = require('./babel.config');

function devConfig(entry = "index.jsx") {
  return {
    input: path.resolve(process.cwd(), entry), // process.cwd() 输入是目标项目的路径
    output: {
      file: path.resolve(process.cwd(), 'dist/bundle.js'), // process.cwd() 输出是目标项目的路径
      format: 'iife',
      globals: {
        "react": 'React',
        'react-dom': 'ReactDOM'
      }
    },
    external: [
      'react', 'react-dom'
    ],
    plugins: [
      babel(bableConfig),
      livereload(),
      serve({
        openPage: path.resolve(process.cwd(), 'index.html'),
        port: 3001,
        contentBase: './'
      })
    ]
  }
}

module.exports = {
  devConfig
}

这里和小伙伴们说下大功臣process.cwd()

process.cwd()：在哪运行，就获得哪里的项目路径

react-demo是一个小demo，网上一堆就不提供啦

通过命令在项目中生成脚手架提供的模板

1，项目结构

bin/index.js

const { Command, program } = require('commander');
const fse = require('fs-extra');
const path = require('path');

program
  .version('0.1.0')
  .description('this is a test')
  // 添加了一个子命令
  .command('create [project]') // 构建一个打包工具
  .description('这个命令可以创建模板')
  .action((project, type) => {
    console.log(`entry :${project}, type: ${JSON.stringify(type)}`)
    fse.copy(path.resolve(__dirname, '../template'), process.cwd(), (err) => {
      if (err) return console.log('Failed!');
    })
    console.log('success!')
  })
  
program.parse(process.argv);

原先的react-demo

输入$ cluo-cli create project1后的react-demo

这里和小伙伴们说下大功臣fse.copy

fse.copy('当前的模板路径', '目标模板路径')

是不是之前以为很难，现在感觉挺简单的了~~~

完结

这篇文章我尽力把我的笔记和想法放到这了，希望对小伙伴有帮助。

欢迎转载，但请注明来源。 最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。