Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

boarder,快速开始一个webpack项目-介绍篇 #7

Open
4 of 6 tasks
shaodahong opened this issue Jun 22, 2017 · 8 comments
Open
4 of 6 tasks

boarder,快速开始一个webpack项目-介绍篇 #7

shaodahong opened this issue Jun 22, 2017 · 8 comments
Labels

Comments

@shaodahong
Copy link
Owner

shaodahong commented Jun 22, 2017

现在许多的项目都是基于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.htmlindex.js,index.js是项目的主入口,如果index.js这个名字不喜欢,那么你修改了最后也要把build-webpack.base.js里面entry的入口名字改掉

功能实现:

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

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

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

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

@jamninetyfive
Copy link

多页应用 可以么?

@shaodahong
Copy link
Owner Author

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

@shaodahong shaodahong changed the title boarder,快速开始一个webpack项目 boarder,快速开始一个webpack项目-介绍篇 Jun 26, 2017
@billyhero
Copy link

初始化报错,无法完成。
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
Copy link
Owner Author

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

@billyhero
Copy link

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

@shaodahong
Copy link
Owner Author

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

@billyhero
Copy link

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

@shaodahong
Copy link
Owner Author

@billyhero 恩,好了就行

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants