从零开始开辟一个react脚手架(一)

前沿: 脚手架东西一大堆,但假如悉数用第三方的脚手架,项目做起来一定束手束脚,想来点差异化的东西都很难,所以最好是整一份本身的脚手架东西,想咋玩咋玩。
阅读了next脚手架和create-react-app脚手架源码,next脚手架太重,create-react-app彷佛没有服务器端衬着的内容,心血来潮本身写一个,半途会夹杂着两个脚手架事情的源码解读,只需理解了头脑,就算照搬过来也是本身东西。哈哈(必定是会参考的)

脚手架不难,然则涉及到源码解读,可能会分为几个章节,横竖末了能完成create-react-app如出一辙的结果,而且支撑服务器端衬着。

第一步 建立两个项目

kkk-react 这个是脚手架项目,脚手架说白点就是node项目了,但要常常看结果,总不能一向publish到npm,所以须要npm link。
cli-view,这个项目理论上应该是由kkk-react建立出来的,包括一些基础的文件和文件夹,而且
package.json的scripts包括了start,build等构建敕令。但由于是开辟脚手架啊,这一步能够放到最厥后弄,先把打包构建的步骤弄好。

细致步骤
在kkk-react目次下, 实行npm init ,编辑package.json中的name为’kkk-react’,末了在项目根目次中 实行npm link敕令。另有一些细节看截图

《从零开始开辟一个react脚手架(一)》

变动package.json中的main,指向lib目次,开辟阶段先这么玩,真正宣布的时刻,应该是新建一个bin字段,内里能够包括敕令,当npm install这个脚手架的时刻,这些敕令天生对应的实行敕令到node_modules的bin目次中,如许我们在项目中就实行了。
开辟的时刻我们npm run dev,就可以常常编译到lib目次了。

至于cli-view一样的,先npm init,然后实行npm link kkk-react。建立一个cs.js
引入kkk-react,就可以看到结果了。

《从零开始开辟一个react脚手架(一)》
能够看到引入后,经由过程node实行 就打印了我们在kkk-react输出的测试字段。一样的只是开辟阶段这么玩,等一切都搞定了,就是经由过程npm run xxx,来实行对应的操作了。

第一篇先这么著了,还只是尝尝水,争夺来日诰日出第二篇

第二篇,大略解读下create-react-app

    原文作者:白衣卿相
    原文地址: https://segmentfault.com/a/1190000018660951
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞