ΠΡΠΎΡ ΡΡΡΠ°Π½Π½ΡΠΉ Π²ΠΎΠΏΡΠΎΡ Π±ΡΠ» Π½Π΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ. Π§ΡΠΎ Π²ΡΠ·Π²Π°Π»ΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ. ΠΠ΅ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π»ΠΈ ΡΡΠΎ Π΄Π²Π°ΠΉΡΠ° ΠΈΠ»ΠΈ ΠΌΡΡΠ°Π²ΡΠΈΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° (Π²Π΅ΡΡΠΈΡ 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"
}
}
Π£Π΄Π°Π»ΠΈΡΡ node_modules ΠΈ ΠΏΠΎΠΏΡΡΠ°ΡΡΡΡ ΠΏΠ΅ΡΠ΅ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ? ΠΠ΅Ρ, ΠΎΠΏΡΠ±Π»ΠΈΠΊΡΠΉΡΠ΅ webpack.config.js
ΡΠ²ΠΈΠ΄Π΅ΡΡ.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ, ΠΈΠ·Π²ΠΈΠ½ΠΈΡΠ΅ Π½ΠΎΠ²ΠΈΡΠΎΠΊ, ΠΏΡΠΎΠ΅ΠΊΡ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΡΠ΅ΡΡΡ ΠΏΡΡΠΌΠΎ Π² Π΄Π°ΡΠ±ΠΎΡΠ΄Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ .
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 ΠΌΠΎΠΆΠ΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ ΡΡΡΠΎΠΈΡΡΡΡ, Π½ΠΎ ΠΏΡΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π΅Ρ ΡΡΠΈΠ»Ρ ΠΌΡΡΠ°Π²ΡΡ.
ΠΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΠ±ΠΎΡΠΊΡ npm run
ΠΡΠΎΠ±Π»Π΅ΠΌΠ°, ΡΠΏΠΎΠΌΡΠ½ΡΡΠ°Ρ Π²ΡΡΠ΅, ΠΏΠΎΡΠ²ΠΈΡΡΡ
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
}]);
ΠΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ΅ΡΠ΅Π½Π°, ΡΠΏΠ°ΡΠΈΠ±ΠΎ Π±ΠΎΠ»ΡΡΠΎΠ΅.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π webpack.config.js Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΡΡΠΎΠΊΡ
antd
: