@dx-groups/athena

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

Stats

StarsIssuesVersionUpdatedCreatedSize
@dx-groups/athena
502.1.73 years ago3 years agoMinified + gzip package size for @dx-groups/athena in KB

Readme

athena

NPM version build status Test coverage gemnasium deps npm download

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

安装:

@dx-groups/athena

设计原则

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

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

定制

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.jsonscripts 配置如下

"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

默认内置了 eslintstylelint 两种 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+

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.