shaodahong/dahong

boarder，快速开始一个webpack项目-介绍篇

shaodahong opened this issue · 8 comments

shaodahong commented

现在许多的项目都是基于webpack来构建的，并且自从webpack提供了中文官网后友好度大大的提高了，但是有些时候想快速开始一个webpack项目却只能把之前项目的一些config配置拿过来改改显得有点麻烦，所以写了一个简易的脚手架（真的很简易！！！）

安装：

$ npm install boarder -g

使用：

$ boarder init <项目名>
$ cd <项目名>
$ npm install
$ npm run dev

初始化的结构目录是这样子的

├── README.md
├── build
│   ├── webpack.base.js
│   ├── webpack.build.js
│   └── webpack.dev.js
├── dist
│   ├── index.html
│   └── static
│       └── js
├── package-lock.json
├── package.json
└── src
    ├── assets
    ├── index.html
    └── index.js

目录结构还是很简单的

  1. build存放着构建相关的代码
  2. src存放着开发相关的代码，初始化了两个文件index.html和index.js，index.js是项目的主入口，如果index.js这个名字不喜欢，那么你修改了最后也要把build-webpack.base.js里面entry的入口名字改掉

功能实现：

  • 支持ES6写法，通过Babel来转换
  • 支持小图片自动转Base64
  • 支持业务和依赖代码的分离
  • 支持热更新
  • 支持Sass,Stylus或者Less
  • 优化构建速度

css预处理器本身不太想集成，因为每个业务中需要用到的预处理器都是不一样的，但是考虑到常用的预处理器就那么几种，所以接下来也会集成

构建的速度肯定是需要优化的，本身boarder这个包初始化还不是很完善，其实我只要一个目的就是当你没有明确用的框架的时候boarder init一个是可以快速来生成一个webpack项目的，如果有明确的框架，肯定是框架同款的cli好用，比如vue-cli和ng-cli这些

如果你在项目中使用boarder有相关的问题可以给我提issues
boarder issues
webpack模板 issues

jamninetyfive commented

多页应用 可以么?

shaodahong commented

@jamninetyfive 目前还未支持，不过下一个版本会支持的，请关注

billyhero commented

初始化报错，无法完成。
e:\webpack-boarder>boarder init my-project
run C:\Users\Administrator.boarder-templates\my-project wdemo e:\webpack-boarde
r\my-project
err { RequestError
at ClientRequest.req.once.err (C:\Users\Administrator\AppData\Roaming\npm\no
de_modules\boarder\node_modules\got\index.js:73:21)
at Object.onceWrapper (events.js:316:30)
at emitOne (events.js:115:13)
at ClientRequest.emit (events.js:210:7)
at TLSSocket.socketErrorListener (_http_client.js:400:9)
at emitOne (events.js:115:13)
at TLSSocket.emit (events.js:210:7)
at emitErrorNT (internal/streams/destroy.js:62:8)
at _combinedTickCallback (internal/process/next_tick.js:102:11)
at process._tickCallback (internal/process/next_tick.js:161:9)
code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE',
message: 'unable to verify the first certificate',
host: 'github.com',
hostname: 'github.com',
method: 'GET',
path: '/shaodahong/wdemo/archive/master.zip',
bufferedData: }

shaodahong commented

@billyhero 像是网络原因，你是不是开了代理什么的

billyhero commented

@shaodahong 没有开代理的，我再重新安装一下boarder试一下看看。

shaodahong commented

@billyhero 恩，报错的原因大概的意思就是你的网络访问https报错 ，可以看看这里的解决办法

  • 👍1
billyhero commented

@shaodahong npm config set strict-ssl=false 然后再注销一下电脑，现在可以下载了。谢谢~~

shaodahong commented

@billyhero 恩，好了就行