fis3-hook-node_modules
v2.3.1
Published
fis3 npm support
Downloads
635
Keywords
Readme
fis3-hook-node_modules
fis3 对npm的node_modules模块的支持
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 })
一般自己写的代码都不需要这个处理。