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

fis3-hook-node_modules

v2.3.1

Published

fis3 npm support

Downloads

725

Readme

fis3-hook-node_modules

fis3 对npm的node_modules模块的支持

NPM version

Install

npm install fis3-hook-node_modules -g

Dependencies

  • fis3-hook-commonjs
  • mod.js

Usage

添加commonjs支持 (需要先安装fis3-hook-commonjs)

fis.hook('commonjs', {
    extList: ['.js', '.jsx', '.es', '.ts', '.tsx']
})

为node_modules文件添加针对mod.js的转换

fis.match('/{node_modules}/**.js', {
    isMod: true,
    useSameNameRequire: true
});

禁用fis3默认的fis-hook-components

fis.unhook('components')
fis.hook('node_modules')

如何使用私有npm模块

私有npm模块可以放在内网的git仓库,也可以直接使用http地址安装

直接安装tar包

npm install https://github.com/jashkenas/backbone/archive/1.3.1.tar.gz --save

从git仓库安装

npm install git+https://github.com/jashkenas/backbone --save

如何像webpack那样开发

通过这个插件, fis3已经完整实现通过 require语法加载node_modules, css, js, image等资源文件, 并支持整个npm生态圈

需要的插件

  • fis3-hook-node_modules
  • fis3-hook-commonjs
  • fis3-postpackager-loader
  • fis3-preprocessor-js-require-css
  • fis3-preprocessor-js-require-file

基本的配置

fis.hook('commonjs', {
    baseUrl: './client',
    extList: ['.js', '.jsx', '.es', '.ts', '.tsx']
});

// client为项目目录
fis.match('/{node_modules, client}/**.js', {
    isMod: true,
    useSameNameRequire: true
});

fis.match('{*.{es,jsx},/client/**.js}', {
    rExt: 'js',
    isMod: true,
    useSameNameRequire: true,
    parser: fis.plugin('babel-5.x', {
        presets: ["es2015", "react", "stage-0"]
    })
    
    // 或者用 typescript 编译也可以。
    // parser: fis.plugin('typescript')
});

// 用 node-sass 解析
fis.match('*.scss', {
    rExt: 'css',
    parser: [
        fis.plugin('node-sass', {
            include_paths: [
                'static/scss'
            ]
        })
    ],
    postprocessor: fis.plugin('autoprefixer')
});


// 添加css和image加载支持
fis.match('*.{js,jsx,ts,tsx,es}', {
    preprocessor: [
      fis.plugin('js-require-css'),
      fis.plugin('js-require-file', {
        useEmbedWhenSizeLessThan: 10 * 1024 // 小于10k用base64
      })
    ]
})

fis.match('/client/static/**.js', {
  parser: null,
  isMod: false
});

// 用 loader 来自动引入资源。
fis.match('::package', {
    postpackager: fis.plugin('loader')
});

// 禁用components
fis.unhook('components')
fis.hook('node_modules')

fis.match('/client/index.jsx', {
  isMod: false
})

配置项说明

  • mergeLevel npm 包去重级别, node 版本小于 5 时默认为 1 否则默认为 0, npm 3+ 不需要去重。
    • 0 如果版本完全一致则去重。
    • 1 patch 版本号一致则去重。相当于 1.1.x
    • 2 min 版本号一致则去重。相当于 1.x
    • 3 忽略版本,只要包名一致则去重。
  • ignoreDevDependencies 默认为 false 标记是否忽略 devDependencies。
  • shimProcess 默认为 false 自动检测 js 内容,存在 process 的调用,自动添加 var process = require('process/browser') 的 shim 模块。(有些插件并不适用)
  • shimGlobal 默认为 false 自动检测 js 内容,存在 global 的调用,自动添加 global 的 shim 代码。(有些插件并不适用)
  • shimBuffer 默认为 false 自动检测 js 内容,存在 buffer 的调用,自动添加 buffer 的 shim 模块。(有些插件并不适用)
  • env 默认在代码压缩的情况下为 production 否则为 development。 支持配置或者回调函数。
  • shutup 默认为 false 可以设置不提示模块没找到。

文件属性说明

  • skipBrowserify 默认模块化的 js 都会进行 browserify 处理,如果文件的这个属性设置成了 true, 则会跳过。 如:

    fis.match('/modules/**.js', {
      skipBrowserify: true
    })

    一般自己写的代码都不需要这个处理。