@bear-fe/dbl
阅读该文档前,请确定你的模块版本 1.0.8
Last updated 2 years ago by xyzhanjiang .
MIT · Original npm · Tarball · package.json
$ cnpm install @bear-fe/dbl 
SYNC missed versions from official npm registry.

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 @yj/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中添加一个<meta name="no-need-script" >

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,方便查看

Current Tags

  • 1.0.8                                ...           latest (2 years ago)

1 Versions

  • 1.0.8                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 2
Last Month 3
Dependencies (12)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |