前言
NodeJS这东西是不是学过了，之后感觉又像没学到什么东西？？？
我最近翻到了之前学习node的笔记，又结合了一些大佬的经验，这里把node系列相关的东西串联一下，分享给小伙伴们，顺便我自己也加深一下印象。
总共分为六篇
node打怪升级系列 - 手写中间件篇
node打怪升级系列 - 手写发布订阅和观察者篇
node打怪升级系列 - 手写compose(洋葱模型)
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，命令行开发
可以看下⚡node打怪升级系列 - 手写脚手架交互式命令界面
5，rollup开发
bin/babel.config.js
js
module.exports = {
configFile: false, // 禁止读取 babel 的配置文件
babelrc: false,
presets: [
require.resolve('@babel/preset-env'),
require.resolve('@babel/preset-react')
]
}bin/rollup.js
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
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
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('当前的模板路径', '目标模板路径')
是不是之前以为很难，现在感觉挺简单的了~~~
完结
这篇文章我尽力把我的笔记和想法放到这了，希望对小伙伴有帮助。
欢迎转载，但请注明来源。
最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。
