fis3 对npm的node_modules模块的支持
npm install fis3-hook-node_modules -g暂时process, buffer等node全局变量的兼容还需手动安装依赖模块(之后会升级fis3已实现自动安装)
请安装至你的项目目录下面
npm install process buffer is-buffer --save安装插件的的时候务必要带上--save或者--save-dev, 否则会出现文件查找不到的问题
- fis3-hook-commonjs
- mod.js
添加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')fis.hook('commonjs') 一定要在 fis.hook('node_modules')之前, 否则会出现文件找不到的问题
- useDev 加载 devDependencies 的模块, 默认为
false
通过这个插件, 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"]
})
});
// 用 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
})
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent