javascript - 使用 webpack 重新导出组件时不包含 Antdesign 样式
问题描述
我正在开发一个从 Antdesign 导入组件的项目,为它们设置样式/为它们添加额外的道具,..(扩展它们)并重新导出它们。然后其他项目应该能够通过 npm 安装这个项目并使用扩展组件。
组件在这样的文件夹中构造:
Button
- index.js
index.js
包含导入、扩展和导出:
import { Button } from 'antd'
Button.foo = bar // just dummy code
export default Button
然后在组件文件夹级别有一个 index.js 文件,通过从那里导出所有组件来简化导入:
export { default as Button} from './Button'
要构建到bundle.js
我使用以下 webpack 配置:
const path = require('path')
const nodeExternals = require('webpack-node-externals')
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const themes = require('./src/content/theming')
const fs = require('fs');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './src/content/theming/test.less'), 'utf8'));
module.exports = env => {
return {
entry: path.resolve(__dirname, 'src/content/components/index.js'),
output: {
path: path.resolve(__dirname, './dist/lib'),
filename: 'index.js'
},
externals: [nodeExternals()],
plugins: [
//new BundleAnalyzerPlugin()
new ExtractTextPlugin('style.css')
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react', { 'plugins': ['@babel/plugin-proposal-class-properties'] }],
plugins: [['import', { 'libraryName': 'antd', 'style': true }]] // `style: true` for less
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract([
{loader: "css-loader"},
{loader: "less-loader",
options: {
modifyVars: themeVariables,
root: path.resolve(__dirname, './')
}
}
])
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: "css-loader"
})
}
]
}
}
}
而这个package.json:
{
"name": "new project",
"main": "./dist/lib/index.js",
"files": [
"dist/lib/*"
],
"scripts": {
"build": "./node_modules/.bin/webpack --mode=production"
},
"author": "",
"standard": {
"env": [
"jest"
]
},
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"axios": "^0.18.0",
"babel-loader": "^8.0.5",
"babel-plugin-import": "^1.11.0",
"css-loader": "^2.1.1",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "^3.0.1",
"less": "2.7.0",
"less-loader": "^5.0.0",
"less-vars-to-js": "^1.3.0",
"standard": "^12.0.1",
"style-loader": "^0.23.1",
"webpack": "^4.30.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.2",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"antd": "^3.17.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
}
}
现在,当我运行时npm run build
,它会正确构建,但如果我将它们导入另一个项目,则没有样式。
这是我第一次创建这样的项目,我只是无法理解为什么它不起作用。任何帮助将不胜感激。
解决方案
所以基本上我自己发现了这个问题。在package.json
我调用的外部条目中nodeExternals()
。这导致 node_modules 文件夹被忽略。删除它包括生产构建中的 css。
推荐阅读
- python - 高斯过程回归:将输入映射到时间序列
- javascript - Socket.io 和 Chat 应用程序出现 ERR_CONNECTION_REFUSED 错误
- javascript - Styled Components 如何转发 props?
- flutter - 如何解决未处理的异常:类型'String'不是'index'类型'int'的子类型
- java - 休眠限制以在列表中使用类似子句进行搜索
- node.js - onCall 云函数不要等待承诺完成
- ios - 在 iOS 的 Intents 扩展中访问 Cloud kit/Core Data 条目
- laravel - laravel-从下拉菜单中删除重复项
- jquery - JQuery.inArray 问题
- javascript - 带修改点的箭头