@spemi/build-app
中后台企业级应用标准化脚本
Usage
yarn global add @spemi/build-app
$ API_ENV=real build-app
Configuration
在根目录下的config文件夹下新增project.config.js
module.exports = {
webpackConfig: {
entry: ['./src/index.js'],
devServer: {
port: 8888,
proxy: require('./proxy.config')
},
}
}
FAQ
1. analysis
$ dian build --profile
2. 环境变量?
$ API_ENV=real dian build
目前使用的环境变量有2个:
- API_ENV = dev、test、stable、sit、pre、real,默认为"real"(prod)
如果有一些业务逻辑需要区分不同环境,可以在代码中直接使用
process.env.API_ENV
- NODE_ENV 一般情况下开发者无需关注: dian start 会使用 "development", dian build 使用 "production"
2. proxy ?
module.exports = {
webpackConfig: {
devServer: {
proxy: {
// TODO: add your proxy settings!
}
}
}
}
3. 检查循环依赖?
const CircularDependencyPlugin = require('circular-dependency-plugin')
module.exports = {
webpackConfig: {
plugins: [new CircularDependencyPlugin()] // https://www.npmjs.com/package/circular-dependency-plugin
}
}
4. 使用 useable style?
module.exports = {
enableStyleUseable: true, // defaults to false
}
5. 使用 css modules?
module.exports = {
enableCssModules: true, // defaults to false
}
6. 在 less 文件中预载入主题变量文件?
module.exports = {
// 提供一个主题变量文件路径,项目内的 less 文件会 append 此文件
themeVarsPath: './node_modules/@spemi/global-style/antd/theme.less',
}
7. 开启深色模式切换开关?
module.exports = {
// 需要提供 themeVarsPath 以开启 style-resource-loader
themeVarsPath: './node_modules/@spemi/global-style/antd/theme.less',
themeConfig: {
enable: true, // 是否开启插件:默认为开启
defaultPath: '', // 自定义默认主题路径,默认值为 themeVarsPath
darkPath: '' //自定义深色模式主题路径,默认值为 path.join(themeVarsPath, '../dark.less'),
styleDir: '' , // 样式 json 文件存放目录,默认值为 ./src/styles
generateOnce: true, // 是否在编译时只生成一次 color.less,默认为 true
},
}
8. alias
module.exports = {
webpackConfig: {
resolve: {
alias: {
// TODO: add you alias!
}
}
}
}
9. module 'xxx' cannot be resolved?
macos下大小写不敏感,但是linux敏感。在本地提前发现这个问题,有2个方式:
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
module.exports = {
webpackConfig: {
plugins: [new CaseSensitivePathsPlugin()]
}
}
- 使用 eslint-plugin-import: https://www.npmjs.com/package/eslint-plugin-import
10. 避免引入 moment locales
const webpack =require('webpack')
module.exports = {
webpackConfig: {
plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),]
}
}