Question

我正在一个项目中，该项目从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时，它可以正确构建，但是如果我将它们导入另一个项目中，则没有样式。

这是我第一次创建这样的项目，但是我无法理解为什么它不起作用。任何帮助将不胜感激。

Answer 1

所以基本上我是自己发现问题的。在package.json的外部条目中，我正在呼叫nodeExternals()。这导致node_modules文件夹被忽略。删除此选项将在生产版本中包含CSS。

使用Webpack重新导出组件时不包含Antdesign样式

1 个答案: