npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dx-groups/athena

v2.1.7

Published

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

Downloads

13

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+