athena

athena 是基于 webpack 的应用开发工具，添加灵活的配置选项及周边支持

安装：

设计原则

尽量遵循 "开闭原则" - 对扩展开放，对修改关闭

将必要的内容固化，力求按照统一标准对外输出结果

定制

athena 默认会解析项目根目录下的 .athena.js 文件，并在构建时应用配置的内容，文件的结构如下：

module.exports = {
  entry: '<src/index.js>',                    // 项目的入口文件，默认为 'src/index.js'
  publicPath: '</>',                          // 项目发布路径，默认为根目录启动 '/'
  babel: {},                                  // babel 配置信息
  webpack: {
    dev: {},                                  // 开发时用到的 webpack 配置
    prod: {},                                 // 构建时用到的 webpack 配置
    vendor: [],                               // 构建时，splitChunks 插件独立打包的模块
    dll: []                                   // 开发时 dll 列表
  },
  serviceWorker: '<src/service-worker.js>'    // service-worker配置
  proxy: {},                                  // 代理配置
}

其中，babel 默认配置为

{
  babelrc: false,
  highlightCode: true,
  presets: [
    ['@babel/preset-env', { modules: false }],
    ['@babel/preset-stage-0', { decoratorsLegacy: true }],
    '@babel/preset-react',
  ],
  plugins: [
    'react-hot-loader/babel',
  ],
}

service-worker 为项目注入了 PWA 的相关支持，默认实现采用 Workbox API，可参考 示例代码

环境变量

为了使项目使用各种环境，常常需要能在代码中注入多种环境变量，athena 为此提供了友好的支持

只要在执行命令时添加

ATHENA_ENV_<env>=<value> athena <cmd>

之后，在代码中，即可通过 process.env.<env> 取到该值

例如： 执行命令

ATHENA_ENV_BUILD_ENV=test athena build'

项目中即可取到 process.env.BUILD_ENV 的值为 test

命令

一个常规的 athena 项目，其 package.json 的 scripts 配置如下

"scripts": {
  "start": "athena start",
  "build": "athena build",
  "analyze": "athena build --report",
  "lint": "athena lint src",
  "lint-fix": "athena lint-fix src"
},

start

以开发模式启动 app

然后可以在浏览器中打开 http://localhost:3000 查看结果

build

构建用于发布的版本，默认都生成在 build 目录下

也可以执行 build --report 命令，分析部署包中的内容构成

lint && lint-fix

默认内置了 eslint 和 stylelint 两种 lint 工具，并且触发时机是一致的

eslint 的规则可以在项目根目录下创建 .eslintrc 或者 .eslintrc.js 中配置

stylelint 的规则可以在项目根目录下创建 .stylelintrc 中配置

html 模板参考

有时候需要在 html 中根据不同的运行环境添加不同的脚本或标签，可以借助模板语法，并根据 htmlWebpackPlugin.options.minify 的值来判断处理，比如：

<% if (htmlWebpackPlugin.options.minify) { %>
  <script defer src="//cdn.bootcss.com/react/16.2.0/umd/react.production.min.js"></script>
  <script defer src="//cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<% } %>

HMR

开发时借助 react-hot-loader 支持 HMR，只要在 App 文件中做如下处理即可

// ./containers/App.js
import React from 'react'
import { hot } from 'react-hot-loader'

const App = () => <div>Hello World!</div>

export default hot(module)(App)

也可参考 示例程序

mock

为了提升开发体验，除了提供 proxy 的功能外，对简单的接口，mock 工具在很多场景下都是更好的选择

athena 默认集成了 webpack-api-mocker，并解析项目根目录下的 .athena.mock.js 文件，具体语法请参考 webpack-api-mocker

注意事项

• ~~若开发环境配置 webpack 时将 React*（React 及依赖 React 的库）加入 dll，那么将会引用 react-dom.production.min.js，若运行出错，那么错误信息会被隐藏，只显示 Minified React error 的错误。~~ 已修复，2.1.5+