dbl

阅读该文档前，请确定你的模块版本 1.0.8

功能

• 1、生成项目脚手架
• 2、基本构建功能，如css、js的合并、压缩等，打包后提取公共依赖
• 3、编译 less、sass、jsx、handlebars、ejs，并可配置增加新开发语言，均需要自己配置对应的 loader 实现
• 4、自动生成入口js文件script标签，直接加载子页面功能
• 5、模块管理，工具内核是webpack，webpack理念是将js、css、html模版、less、sass、ejs......通通视为资源，可以非常方便地进行模块化。
• 6、支持npm、bower模块，海量开源资源
• 7、支持 es2015
• 8、支持 cssnext，通俗地说也就是 CSS4
• 9、支持自动添加浏览器厂商前缀

前置工作

安装 node（4.2.2+）。

安装

npm install -g @bear-fe/dbl

使用

创建一个目录，在当前目录打开控制台，初始化项目：

dbl init 

初始化时可以选择使用模板：

dbl init -t vue

目前支持以下模板：

1. default 不指定参数时的默认模板，默认兼容 IE8
2. vue 配置使用 vue 的模板

初始化以后需要安装依赖：

npm install

每个项目都会有自己对应的依赖需要安装，默认情况下依赖的模块不会提交。

启动本地服务及mock服务，开发调试：

dbl server

server 启动后，默认端口号是 3001 和 8001，访问地址为：127.0.0.1:3001，mock服务访问地址：127.0.0.1:8001

也可以自己指定端口号：

dbl server -p 3002 -m 8002

这样访问地址为：127.0.0.1:3002，mock服务访问地址：127.0.0.1:8002

开发完成，打包，生成 build 结果：

dbl deploy

打包之前需要注意的事项

确保 package.json 文件里面的 name(项目名) 和 version(项目版本号) 正确，每次修改上线之前都应该升级一次版本号，以确保新上传的资源不会对线上现有资源造成影响。

项目名使用连字符，版本号可以从 0.0.1 开始

{
  "name": "project-name",
  "version": "0.0.1",
  "browserslist": [
    "last 2 version",
    "ie 8"
  ],
  ...
}

browserslist 属性是该项目的浏览器支持情况。

项目目录结构

├── build/                 # 打包后文件目录，初始化时没有，打包后自动生成
├── doc/                   # mock 相关自动生成目录
├── mock2easy/             # mock 相关自动生成目录
├── node_modules/          # 模块自动生成目录，该目录不在 SVN 中提交
├── src/                   # 开发源代码目录
│   ├── components/        # vue 组件目录，需要自行创建
│   ├── css/               # 样式目录
│   ├── images/            # 图片目录
│   ├── layout/            # 页面布局文件目录
│   ├── pages/             # vue 页面组件目录，需要自行创建
│   ├── scripts/           # js 脚本目录
│   │   ├── common/        # 公共 js 文件
│   │   ├── plugins/       # js 插件
│   │   ├── common.js      # 所有页面都会加载的 js 文件
│   │   └── index.js       # 首页自动加载的 js 文件
│   ├── templates/         # 模板目录，需要自行创建
│   └── index.html         # 首页
├── .babelrc               # babel 配置文件
├── make-webpack.config.js # webpack 配置文件
├── package.json
├── package-lock.json
├── postcss.config.js      # PostCSS 配置文件
├── readme.md              # readme
├── webpack.config.js
└── webpack-dev.config.js

说明：

1. src 是开发目录。
2. html 文件放在 src 目录下。
3. src/index.html 是首页。
4. src/layout 是公共页面片段目录，用来放置一些页面头部，顶部，尾部之类的。引入方式请直接参考 src/index.html 页面。
5. src/scripts 是 js 目录。
6. 页面会自动生成 src/scripts/common.js 默认情况下每个页面都会自动引入这个 src/scripts/common.js 适合放入一些公用代码以及引入样式。
7. src/scripts 目录下的 .js 文件是入口文件，应与 src 中的 .html 文件名一一对应，例如：src/start.html，其对应加载的 js 应该是 src/scripts/start.js，该 js 文件会自动加载，无需手写。
8. 原则上 src/scripts 目录下面不再放置其它 js 文件，如果需要可以在 src/scripts 目录下面新建一个目录放置一些插件，比如 src/scripts/plugins 目录。
9. src/css 是样式目录，所有页面公用样式在 src/scripts/common.js 里面引入，引入方式直接查看 src/scripts/common.js 里面的代码，页面私有样式在页面私有的 js 文件里面引入。原有的页面引入了部分样式，只作示例，可以删除。
10. src/images 目录是图片目录。
11. 按照 webpack 规范，入口 .js 文件不可以被 require
12. 项目中的资源路径请不要使用/开头，因为打包时会找不到资源，请使用@/开头的路径，比如 @/imgaes/, @/css

mock

启动server同时会启动一个mock程序，可以添加mock接口，即可在项目开发时使用。mock编辑器访问地址：

127.0.0.1:8001

默认情况下所有 mock 接口必须以 .json 结尾作为后缀，便于区分，如果需要自己指定接口后缀，请添加 -s 参数：

dbl server -s .html

更新记录：

1.0.8

1. vue-loader@15

1.0.7

1. webpack@4, babel-loader@8

1.0.6

1. 更改 html-loader 的配置

1.0.5

1. 更新文档

1.0.4

1. 更新文档

1.0.3

1. 删除部分不需要的模块

1.0.2

1. cssnano 增加 safe: true 参数，以免 z-index 属性计算错误

1.0.1

1. vue-loader 升级到 13.6.2
2. default 模板支持 IE8

1.0.0

1. 模块升级
2. 添加生成项目时模板选择功能 dbl init -t vue，不添加此参数是默认模板

0.5.8

1. babel-preset-es2015 -> babel-preset-env
2. html-withimg-loader -> html-loader
3. 删除 @yj 模块

0.5.7

1. 配置 vue, vue-router, vuex, vue-loader

0.5.6

1. 配置使用 cssnano 压缩 CSS
2. 配置 cssnext, autoprefixer，可以使用新增的语法，自动添加浏览器厂商前缀

0.5.5

1. 删除 ejs-loader, 无用
2. 升级 webpack 从 1.12.1 到 1.15.0
3. 配置 es2015

0.5.3

• 1、起始的目录页面不再依赖index.html中的script跳转，现在index.html可以在项目中随意使用或者删除了
• 2、可以在配置文件make-webpack-config中通过配置自定义起始页
• 3、模版中script.html中加载的jquery文件的src去掉了协议部分以自适应协议

0.5.2

• 启动服务及打包时，当检测到html文件对应的入口js文件不存在时，会自动创建了。

0.5.1

• 修复了上次更改导致html中单引号会引起编译异常的bug

0.5.0

• 1、解决了img标签src需要由js赋值的问题，现在可以直接在html中写img标签的src
• 2、在js中require加载html代码时，可以用html-withimg-loader处理图片问题
• 3、入口html不再使用handlebars模版处理，仍然提供加载子页面功能，不过语法更改为：#include("./xxx/xxx.html")
• 4、由于部分页面不需要任何js，提供一项黑科技避免自动生成script标签：head中添加一个

0.3.0

• 1、页面调试目录转移到虚拟目录/__build/，比如demo. html对应的地址变为http://127.0.0.1:3001/__build/demo.html，index. html中生成的目录已做相应更改
• 2、入口html页面将被handlebars-loader热处理，意味着可以使用{{> ./ handlebars/layout.hbs}}语法提取页面公共部分，参见demo.html
• 3、页面公共header项提取为layout.hbs，公共js提取为scripts.hbs，不再需要根据html名更改script的src，会自动生成。参见demo.html
• 4、mock时接口后缀默认是. json，但启动服务时支持设置其他后缀，方法示例：dbl server -s .htm
• 5、handlebars模版文件后缀可以简写为.hbs，handlebars-loader会处理，原. handlebars仍然可以使用

0.2.0

• 1、去除了支持spm模块的代码，因为支付宝已将spm的源下线
• 2、注意publicPath配置处，有各环境的发布路径，请根据需要切换

0.1.4

index.html中生成的页面链接后加上了页面title，方便查看

License

(The MIT License)

Copyright (c) 2011 TJ Holowaychuk <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.