Dva: ์˜ค๋ฅ˜: "๊ธฐ๋ณธ"์— ์ง€์ •๋œ ํ”Œ๋Ÿฌ๊ทธ์ธ 3์ด "์ ‘๋ฏธ์‚ฌ"์˜ ์ž˜๋ชป๋œ ์†์„ฑ์„ ์ œ๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2016๋…„ 10์›” 21์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dvajs/dva

์ด ์ด์ƒํ•œ ์งˆ๋ฌธ์€ ๋ถˆํ™•์‹คํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ์˜ ์›์ธ. dvajs์˜ ๋ฌธ์ œ์ธ์ง€ ant-design(๋ฒ„์ „ 2.0)์˜ ๋ฌธ์ œ์ธ์ง€ ๋ช…ํ™•ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๋‹ค๋ฅธ ์ปดํ“จํ„ฐ๋Š” ๋™์ผํ•œ ํŒจํ‚ค์ง€ ๊ตฌ์„ฑ์„ ๊ฐ–๊ณ  ์ „์—ญ ์„ค์น˜๋ฅผ ์ง€์šฐ๊ณ  ๋‚ด ์ปดํ“จํ„ฐ๋Š” ์ •์ƒ์ ์œผ๋กœ ์ปดํŒŒ์ผํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ด ๋ฌธ์ œ๋Š” ๋‚ด ๋™๋ฃŒ์˜ ์ปดํ“จํ„ฐ์—์„œ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

ERROR in ./src/index.js
Module build failed: Error: Plugin 3 specified in "base" provided an invalid property of "Affix"
    at Plugin.init (D:\Git\web\console\node_modules\babel-core\lib\transformation\plugin.js:131:13)
    at Function.normalisePlugin (D:\Git\web\console\node_modules\babel-core\lib\transformation\file\options\option-manager.js:148:12)
    at D:\Git\web\console\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:30
    at Array.map (native)
    at Function.normalisePlugins (D:\Git\web\console\node_modules\babel-core\lib\transformation\file\options\option-manager.js:154:20)
    at OptionManager.mergeOptions (D:\Git\web\console\node_modules\babel-core\lib\transformation\file\options\option-manager.js:228:36)
    at OptionManager.init (D:\Git\web\console\node_modules\babel-core\lib\transformation\file\options\option-manager.js:373:12)
    at File.initOptions (D:\Git\web\console\node_modules\babel-core\lib\transformation\file\index.js:221:65)
    at new File (D:\Git\web\console\node_modules\babel-core\lib\transformation\file\index.js:141:24)
    at Pipeline.transform (D:\Git\web\console\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
 @ multi index

package.json ํŒŒ์ผ ์ข…์†์„ฑ

{
  "private": true,
  "entry": {
    "index": "./src/index.js"
  },
  "dependencies": {
    "antd": "^2.0.0",
    "classnames": "^2.2.5",
    "dva": "^1.1.0",
    "qs": "^6.2.0",
    "react": "^15.1.0",
    "react-dnd": "^2.1.4",
    "react-dnd-html5-backend": "^2.1.2",
    "react-dom": "^15.1.0",
    "react-router": "^2.8.1",
    "react-sticky": "^5.0.5",
    "urijs": "^1.18.2"
  },
  "devDependencies": {
    "atool-build": "^0.7.6",
    "babel-eslint": "^6.0.4",
    "babel-plugin-import": "^1.0.0",
    "babel-plugin-dva-hmr": "^0.1.0",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "dora": "0.3.x",
    "dora-plugin-proxy": "^0.7.0",
    "dora-plugin-webpack": "0.6.x",
    "dora-plugin-webpack-hmr": "^0.1.0",
    "eslint": "^2.13.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.8.1",
    "eslint-plugin-jsx-a11y": "^1.4.2",
    "eslint-plugin-react": "^5.1.1",
    "glob": "^7.0.5",
    "mockjs": "^1.0.1-beta2",
    "redbox-react": "^1.2.10"
  },
  "scripts": {
    "start": "dora --plugins \"proxy,webpack,webpack-hmr\"",
    "lint": "eslint --fix --ext .js,.jsx .",
    "build": "atool-build"
  }
}
question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

webpack.config.js์—์„œ antd ํ–‰์„ ๋‹ค์Œ์œผ๋กœ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.

webpackConfig.babel.plugins.push(['import', {
  libraryName: 'antd',
  style: 'css'  // if true, use less
}]);

๋ชจ๋“  4 ๋Œ“๊ธ€

node_modules๋ฅผ ์‚ญ์ œํ•˜๊ณ  ๋‹ค์‹œ ์„ค์น˜ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ์š”, webpack.config.js ๊ฒŒ์‹œ

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๋Š” user-dashboard ์—์„œ ์ง์ ‘ ์ˆ˜์ •๋ฉ๋‹ˆ๋‹ค.

node_modules๋Š” ์—ฌ๋Ÿฌ ๋ฒˆ ์‚ญ์ œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค(๋ฒฝ ๋‚ด๋ถ€์™€ ์™ธ๋ถ€์—์„œ ๋ชจ๋‘ ์‹œ๋„). ๋‚˜๋Š” ๊ทธ๊ฒƒ์ด nodejs ๋ฒ„์ „ ๋ฌธ์ œ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค (4.6๊ณผ 6.9๋ฅผ ์‹œ๋„ํ–ˆ์Šต๋‹ˆ๋‹ค).

์ด์ œ package.json์˜ ๋ชจ๋“  ๊ด€๋ จ ํŒจํ‚ค์ง€๋ฅผ ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜๊ณ  node_modules๋ฅผ ์‚ญ์ œํ•˜๊ณ  ๋‹ค์‹œ ์„ค์น˜ํ•˜์‹ญ์‹œ์˜ค.

{
  "private": true,
  "entry": {
    "index": "./src/index.js"
  },
  "dependencies": {
    "antd": "^2.1.0",
    "classnames": "^2.2.5",
    "dva": "^1.1.0",
    "qs": "^6.3.0",
    "react": "^15.3.2",
    "react-dnd": "^2.1.4",
    "react-dnd-html5-backend": "^2.1.2",
    "react-dom": "^15.3.2",
    "react-router": "^2.8.1"
  },
  "devDependencies": {
    "atool-build": "^0.9.0",
    "babel-eslint": "^7.0.0",
    "babel-plugin-import": "^1.0.1",
    "babel-plugin-dva-hmr": "^0.2.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-runtime": "^6.11.6",
    "dora": "0.4.3",
    "dora-plugin-proxy": "^0.8.5",
    "dora-plugin-webpack": "^0.8.1",
    "dora-plugin-webpack-hmr": "^0.2.1",
    "eslint": "^3.8.1",
    "eslint-config-airbnb": "^12.0.0",
    "eslint-plugin-import": "^1.16.0",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.4.1 ",
    "redbox-react": "^1.3.2"
  },
  "scripts": {
    "start": "dora --plugins \"proxy,webpack,webpack-hmr\"",
    "lint": "eslint --fix --ext .js,.jsx .",
    "build": "atool-build"
  }
}

npm start๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ์ •์ƒ์ ์ธ ๋นŒ๋“œ๊ฐ€ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ํŽ˜์ด์ง€ ์ƒˆ๋กœ ๊ณ ์นจ์—๋Š” ant ์Šคํƒ€์ผ์ด ์—†์Šต๋‹ˆ๋‹ค.
npm ์‹คํ–‰ ๋นŒ๋“œ ์‹คํ–‰
์œ„์—์„œ ์–ธ๊ธ‰ํ•œ ๋ฌธ์ œ๊ฐ€ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค

Module build failed: Error: Plugin 3 specified in "base" provided an invalid property of "Affix"

webpack.config ํŒŒ์ผ

const fs = require('fs');
const path = require('path');

module.exports = function (webpackConfig, env) {
  webpackConfig.babel.babelrc = false;
  webpackConfig.babel.plugins.push('transform-runtime');
  webpackConfig.babel.plugins.push(['antd', {
    style: 'css'  // if true, use less
  }]);

  // Enable hmr for development.
  if (env === 'development') {
    webpackConfig.babel.plugins.push(['dva-hmr', {
      entries: [
        './src/index.js',
      ]
    }]);
  }
  //webpackConfig.devtool = 'source-map';

  // Parse all less files as css module.
  webpackConfig.module.loaders.forEach(function (loader, index) {

    if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) {
      loader.test = /\.dont\.exist\.file/;
    }
    if (loader.test.toString() === '/\\.module\\.less$/') {
      loader.test = /\.less$/;
    }
  });

  return webpackConfig;
};

webpack.config.js์—์„œ antd ํ–‰์„ ๋‹ค์Œ์œผ๋กœ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.

webpackConfig.babel.plugins.push(['import', {
  libraryName: 'antd',
  style: 'css'  // if true, use less
}]);

๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰