@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个方式：

• 使用webpack插件：https://www.npmjs.com/package/case-sensitive-paths-webpack-plugin

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$/),]
  }
}