# 部署项目公共文件

# 基于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文件。

# 在脚本文件中通过importrequire引入的公共样式

部署目录

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