@dx-groups/athena

    2.1.7 • Public • Published

    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+

    Install

    npm i @dx-groups/athena

    DownloadsWeekly Downloads

    40

    Version

    2.1.7

    License

    ISC

    Unpacked Size

    83.1 kB

    Total Files

    26

    Last publish

    Collaborators

    • alcat2008