# 部署项目公共文件
# 基于CommonJS或ES6 Module格式的公共脚本
部署目录
project
└── src
└── views
└── public # 可以自行定义公共目录名称
├── 文件.js
├── 文件.js
└── folder # 可以自定义创建目录
├── 文件.js
└── 文件.js
发布代码自动生成
dist/static/js/common-webpack.js
。
# 基于浏览器的全局公共脚本
部署目录
project
└── src
└── common # 用于部署基于浏览器的全局变量模式的公共脚本
├── 文件.js
├── 文件.js
└── folder # 可以自定义创建目录
├── 文件.js
└── 文件.js
src/common
目录只能部署javascript脚本文件,样式文件部署在src/static/styles
目录并以common.{less,sass,styl,css}
命名。
部署在
src/common/文件名.js
会被自动插入到html的<!-- inject:common:js --> <!-- endinject -->
位置,发布代码时会自动合并为dist/js/common.js
文件。
# 在脚本文件中通过import
或require
引入的公共样式
部署目录
project
└── src
└── 任意目录
// 在脚本中通过import 或 require引入样式
import '目录名称/test.{css,less,scss,styl}'
发布代码自动生成
dist/static/css/common-webpack.css
。
如果项目中需要使用cssModule
需要在cyb.config.js
中开启配置
webpack: {
cssLoader: {
options: {
modules: true,
importLoaders: 1
}
}
}
# 基于浏览器的全局公共样式
部署目录
project
└── src
└── static # 用于部署基于浏览器的全局变量模式的公共脚本
└── styles
└── folder # 可以自定义创建其它目录
└── common.{css,less,scss,styl} # 必须以common*命名
发布代码自动生成
dist/static/css/common.css
。