命令 yarn 运行 build 抛出错误
the command yarn run build throw errors
当我尝试使用 yarn 运行 build 构建我的项目时，我得到了我的代码中不存在的错误，我的代码是干净的，它在我的本地工作正常。我已经被困了两个星期来解决这个问题请帮助我解决这个问题。这是我得到的错误
节点版本：v10.15.3
网络包：4.30.0
这是我的 package.json
{
"name": "xxxx",
"version": "1.8.0",
"description": "React website tempate with focus on perfomance and design",
"private": true,
"engines": {
"npm": ">=5",
"node": ">=8.15.1"
},
"author": "Dandelion Pro Team",
"license": "Envato Regular License",
"scripts": {
"analyze:clean": "rimraf stats.json",
"preanalyze": "npm run analyze:clean",
"analyze": "node ./internals/scripts/analyze.js",
"extract-intl": "node ./internals/scripts/extract-intl.js",
"npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
"preinstall": "npm run npmcheckversion",
"postinstall": "npm run build:dll",
"prebuild": "npm run build:clean",
"build": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
"build:clean": "rimraf ./build",
"build:dll": "node ./internals/scripts/dependencies.js",
"start": "cross-env NODE_ENV=development node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run test && npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"presetup": "npm i chalk shelljs",
"setup": "node ./internals/scripts/setup.js",
"postsetup": "npm run build:dll",
"clean": "shjs ./internals/scripts/clean.js",
"clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
"generate": "plop --plopfile internals/generators/index.js",
"lint": "npm run lint:js && npm run lint:css",
"lint:css": "stylelint app/**/*.js",
"lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:eslint:fix": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts --fix",
"lint:js": "npm run lint:eslint -- . ",
"lint:staged": "lint-staged",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"prettify": "prettier --write"
},
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
],
"lint-staged": {
"*.js": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.json": [
"prettier --write",
"git add --force"
]
},
"pre-commit": "lint:staged",
"resolutions": {
"babel-core": "7.0.0-bridge.0"
},
"dllPlugin": {
"path": "node_modules/react-boilerplate-dlls",
"exclude": [
"@types/googlemaps",
"@types/markerclustererplus",
"autosuggest-highlight",
"chalk",
"compression",
"convert-source-map",
"cross-env",
"dotenv",
"etag",
"express",
"fs",
"ip",
"jsdom",
"minimist",
"mocha",
"moment",
"sanitize.css",
"serve-favicon",
"slick-carousel",
"tunnel-agent"
],
"include": [
"core-js",
"lodash",
"eventsource-polyfill"
]
},
"dependencies": {
"@babel/plugin-proposal-export-default-from": "^7.2.0",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/polyfill": "7.4.3",
"@date-io/date-fns": "^1.3.11",
"@date-io/moment": "1.3.8",
"@material-ui/core": "^4.9",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.33",
"@material-ui/pickers": "^3.2.10",
"@react-pdf/renderer": "^1.6.13",
"@types/googlemaps": "^3.38.1",
"@types/markerclustererplus": "^2.1.33",
"acorn": "^6.1.1",
"autoprefixer": "^9.0.0",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.21.1",
"babel-polyfill": "6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bourbon": "^5.1.0",
"bourbon-neat": "^3.0.0",
"caniuse-lite": "^1.0.30001223",
"chalk": "^2.4.2",
"chart.js": "^2.7.3",
"classnames": "^2.2.6",
"compression": "1.7.4",
"connected-react-router": "6.6.1",
"country-language": "^0.1.7",
"country-state-city": "^1.0.5",
"cross-env": "5.2.0",
"date-fns": "2.1.0",
"detect-browser": "^4.0.0",
"dotenv": "^6.0.0",
"downshift": "^1.31.12",
"draft-js": "^0.11.7",
"draft-js-inline-toolbar-plugin": "^3.0.0",
"draft-js-plugins-editor": "^2.1.1",
"draftjs-to-html": "^0.8.3",
"draftjs-to-markdown": "^0.5.1",
"emailjs-com": "^2.6.4",
"express": "4.16.4",
"file-saver": "^2.0.2",
"fontfaceobserver": "2.1.0",
"formik": "^2.1.4",
"geo-reverse": "^1.0.12",
"google-libphonenumber": "^3.2.13",
"history": "4.9.0",
"hoist-non-react-statics": "3.3.0",
"html2canvas": "^1.0.0-rc.7",
"immer": "3.0.0",
"immutable": "3.8.2",
"interactjs": "^1.10.11",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"jspdf": "^2.3.1",
"jss": "^10.0.0",
"jss-rtl": "^0.3.0",
"jwt-decode": "^3.1.2",
"keycode": "^2.2.0",
"leaflet": "^1.7.1",
"leaflet-control-geocoder": "^1.13.0",
"lodash": "^4.17.15",
"material-table": "^1.69.0",
"material-ui-color-picker": "^3.5.1",
"material-ui-pickers": "^2.2.4",
"minimist": "^1.2.5",
"moment": "^2.29.1",
"moment-weekday-calc": "^1.1.4",
"mui-datatables": "^2.13.1",
"net": "^1.0.2",
"nuxeo": "^3.17.0",
"profile-picture": "git+https://github.com/dsalvagni/react-profile-picture.git",
"prop-types": "15.7.2",
"rcolor": "^1.0.1",
"react": "16.8.6",
"react-anchor-link-smooth-scroll": "^1.0.11",
"react-animated-slider": "^2.0.0",
"react-autosuggest": "^9.3.4",
"react-big-calendar": "^0.19.1",
"react-calendar": "^2.17.4",
"react-chartjs-2": "^2.7.4",
"react-charts": "^1.0.10",
"react-clock": "^2.3.0",
"react-countup": "^3.0.3",
"react-dom": "16.8.6",
"react-draft-wysiwyg": "^1.12.13",
"react-dropzone": "^10.2.1",
"react-event-listener": "^0.6.1",
"react-google-maps": "^9.4.5",
"react-helmet": "6.0.0-beta",
"react-html5video": "^2.5.1",
"react-image-lightbox": "^5.1.1",
"react-images": "^1.1.7",
"react-intl": "2.8.0",
"react-ionicons": "^2.1.6",
"react-jss": "^10.0.0",
"react-leaflet": "^2.7.0",
"react-loadable": "^5.5.0",
"react-markdown": "^4.1.0",
"react-modal": "^3.4.4",
"react-notifications-component": "^2.4.0",
"react-number-format": "^3.3.4",
"react-papaparse": "^3.8.0",
"react-pdf": "^5.0.0",
"react-pdf-print": "^0.2.0",
"react-player": "^2.9.0",
"react-popper": "^0.10.4",
"react-print-components": "^1.0.4",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.1",
"react-scroll-parallax": "^1.3.5",
"react-scrollspy": "^3.3.5",
"react-select": "^3.0.4",
"react-slick": "^0.23.1",
"react-swipeable-views": "^0.13.9",
"react-syntax-highlighter": "^7.0.0",
"react-text-mask": "^5.3.2",
"react-trello": "^1.33.0",
"react-ultimate-pagination": "^1.2.0",
"recharts": "^1.4.2",
"recompose": "^0.28.2",
"redux": "4.0.1",
"redux-form": "8.2.0",
"redux-immutable": "4.0.0",
"redux-saga": "1.0.2",
"reselect": "4.0.0",
"sanitize.css": "8.0.0",
"serve-favicon": "^2.4.5",
"slick-carousel": "^1.8.1",
"tunnel-agent": "^0.6.0",
"video-react": "^0.14.1",
"warning": "4.0.2",
"xlsx": "^0.16.6"
},
"devDependencies": {
"@babel/cli": "7.4.3",
"@babel/core": "7.4.3",
"@babel/plugin-proposal-class-properties": "7.4.0",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/plugin-transform-modules-commonjs": "7.4.3",
"@babel/plugin-transform-react-constant-elements": "7.2.0",
"@babel/plugin-transform-react-inline-elements": "7.2.0",
"@babel/preset-env": "7.4.3",
"@babel/preset-react": "7.0.0",
"@babel/register": "7.4.0",
"add-asset-html-webpack-plugin": "3.1.3",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-transform": "3.0.0",
"babel-plugin-styled-components": "1.10.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"babel-preset-es2015": "^6.24.1",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "3.0.0",
"coveralls": "3.0.3",
"css-loader": "2.1.1",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "3.3.4",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "4.1.0",
"eslint-import-resolver-webpack": "0.11.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "2.17.2",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "3.0.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "1.6.0",
"eslint-plugin-redux-saga": "1.0.0",
"eventsource-polyfill": "0.9.6",
"exports-loader": "0.7.0",
"file-loader": "3.0.1",
"happypack": "^5.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "4",
"http-proxy-middleware": "0.19.1",
"imports-loader": "0.8.0",
"lint-staged": "8.1.5",
"ngrok": "3.1.1",
"node-plop": "0.18.0",
"node-sass": "^4.12.0",
"null-loader": "0.1.1",
"offline-plugin": "5.0.6",
"optimize-css-assets-webpack-plugin": "5.0.1",
"plop": "2.3.0",
"postcss-loader": "3.0.0",
"pre-commit": "1.2.2",
"prettier": "1.17.0",
"prismjs": "^1.11.0",
"raw-loader": "2.0.0",
"react-app-polyfill": "0.2.2",
"react-test-renderer": "16.8.6",
"react-testing-library": "6.1.2",
"react-to-print": "^2.12.3",
"rimraf": "2.6.3",
"sass-loader": "^7.1.0",
"sass-material-colors": "0.0.5",
"shelljs": "^0.8.3",
"style-loader": "0.23.1",
"stylelint": "10.0.1",
"stylelint-config-recommended": "2.2.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.6.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.4.1",
"url-loader": "1.1.2",
"webpack": "4.30.0",
"webpack-cli": "3.3.0",
"webpack-dev-middleware": "3.6.2",
"webpack-hot-middleware": "2.24.3",
"webpack-pwa-manifest": "^4.3.0",
"whatwg-fetch": "3.0.0"
}
}
这是我的 webpack 结构
最后这是我 webpack.base.babel.js
的内容
/**
* COMMON WEBPACK CONFIGURATION
*/
const path = require('path');
const webpack = require('webpack');
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });
module.exports = options => ({
mode: options.mode,
entry: options.entry,
output: Object.assign(
{
// Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
},
options.output,
), // Merge with env dependent settings
optimization: options.optimization,
module: {
rules: [
/*
Disabled eslint by default.
You can enable it to maintain and keep clean your code.
NOTE: By enable eslint running app process at beginning will slower
*/
/* {
enforce: 'pre',
test: /\.js?$/,
exclude: [/node_modules/],
loader: 'eslint-loader',
options: {
quiet: true,
}
}, */
{
test: /\.jsx?$/, // Transform all .js and .jsx files required somewhere with Babel
exclude: /node_modules/,
use: {
loader: 'happypack/loader?id=js',
options: options.babelQuery,
},
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
// Preprocess 3rd party .css files located in node_modules
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options:
{
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: false
}
}],
},
{
test: /\.md$/,
use: 'raw-loader'
},
{
test: /\.(jpg|png|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
},
},
/*
Disabled image compression by default,
due error in windows 10 because libpng not available.
The libpng avaible on Linux and Mac system only.
NOTE: To enable this, first you need to install image-webpack-loader.
npm install -i image-webpack-loader --save
*/
// {
// loader: 'image-webpack-loader',
// options: {
// mozjpeg: {
// enabled: false,
// // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
// // Try enabling it in your environment by switching the config to:
// // enabled: true,
// // progressive: true,
// },
// gifsicle: {
// interlaced: false,
// },
// optipng: {
// optimizationLevel: 7,
// },
// pngquant: {
// quality: '65-90',
// speed: 4,
// },
// },
// },
],
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
node: {
fs: 'empty'
},
plugins: options.plugins.concat([
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; Terser will automatically
// drop any unreachable code.
new HappyPack({
id: 'js',
threadPool: happyThreadPool,
loaders: ['babel-loader?cacheDirectory=true']
}),
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
}),
new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
if (!/\/moment\//.test(context.context)) { return; }
// context needs to be modified in place
Object.assign(context, {
// include only CJK
regExp: /^\.\/(ja|ko|zh)/,
// point to the locale data folder relative to moment's src/lib/locale
request: '../../locale'
});
})
]),
resolve: {
modules: ['node_modules', 'app'],
extensions: ['.js', '.jsx', '.react.js'],
mainFields: ['browser', 'jsnext:main', 'main'],
alias: {
'dan-components': path.resolve(__dirname, '../../app/components/'),
'dan-actions': path.resolve(__dirname, '../../app/actions/'),
'dan-redux': path.resolve(__dirname, '../../app/redux/'),
'dan-styles': path.resolve(__dirname, '../../app/styles/components/'),
'dan-api': path.resolve(__dirname, '../../app/api/'),
'dan-images': path.resolve(__dirname, '../../public/images/'),
'dan-vendor': path.resolve(__dirname, '../../node_modules/'),
}
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});
非常感谢 Whosebug
我添加了两个缺少 'transversal-administration'、'transversal-translation' 的文件夹，过去我只有：['app']。过去的加载程序只加载应用程序文件夹
env: {
production: {
// only: ['app'],
only: ['app', 'transversal-administration', 'transversal-translation'],
plugins: [
'lodash',
'transform-react-remove-prop-types',
'@babel/plugin-transform-react-inline-elements',
'@babel/plugin-transform-react-constant-elements',
],
},
当我尝试使用 yarn 运行 build 构建我的项目时，我得到了我的代码中不存在的错误，我的代码是干净的，它在我的本地工作正常。我已经被困了两个星期来解决这个问题请帮助我解决这个问题。这是我得到的错误
节点版本：v10.15.3
网络包：4.30.0 这是我的 package.json
{
"name": "xxxx",
"version": "1.8.0",
"description": "React website tempate with focus on perfomance and design",
"private": true,
"engines": {
"npm": ">=5",
"node": ">=8.15.1"
},
"author": "Dandelion Pro Team",
"license": "Envato Regular License",
"scripts": {
"analyze:clean": "rimraf stats.json",
"preanalyze": "npm run analyze:clean",
"analyze": "node ./internals/scripts/analyze.js",
"extract-intl": "node ./internals/scripts/extract-intl.js",
"npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
"preinstall": "npm run npmcheckversion",
"postinstall": "npm run build:dll",
"prebuild": "npm run build:clean",
"build": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
"build:clean": "rimraf ./build",
"build:dll": "node ./internals/scripts/dependencies.js",
"start": "cross-env NODE_ENV=development node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run test && npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"presetup": "npm i chalk shelljs",
"setup": "node ./internals/scripts/setup.js",
"postsetup": "npm run build:dll",
"clean": "shjs ./internals/scripts/clean.js",
"clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
"generate": "plop --plopfile internals/generators/index.js",
"lint": "npm run lint:js && npm run lint:css",
"lint:css": "stylelint app/**/*.js",
"lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:eslint:fix": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts --fix",
"lint:js": "npm run lint:eslint -- . ",
"lint:staged": "lint-staged",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"prettify": "prettier --write"
},
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
],
"lint-staged": {
"*.js": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.json": [
"prettier --write",
"git add --force"
]
},
"pre-commit": "lint:staged",
"resolutions": {
"babel-core": "7.0.0-bridge.0"
},
"dllPlugin": {
"path": "node_modules/react-boilerplate-dlls",
"exclude": [
"@types/googlemaps",
"@types/markerclustererplus",
"autosuggest-highlight",
"chalk",
"compression",
"convert-source-map",
"cross-env",
"dotenv",
"etag",
"express",
"fs",
"ip",
"jsdom",
"minimist",
"mocha",
"moment",
"sanitize.css",
"serve-favicon",
"slick-carousel",
"tunnel-agent"
],
"include": [
"core-js",
"lodash",
"eventsource-polyfill"
]
},
"dependencies": {
"@babel/plugin-proposal-export-default-from": "^7.2.0",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/polyfill": "7.4.3",
"@date-io/date-fns": "^1.3.11",
"@date-io/moment": "1.3.8",
"@material-ui/core": "^4.9",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.33",
"@material-ui/pickers": "^3.2.10",
"@react-pdf/renderer": "^1.6.13",
"@types/googlemaps": "^3.38.1",
"@types/markerclustererplus": "^2.1.33",
"acorn": "^6.1.1",
"autoprefixer": "^9.0.0",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.21.1",
"babel-polyfill": "6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bourbon": "^5.1.0",
"bourbon-neat": "^3.0.0",
"caniuse-lite": "^1.0.30001223",
"chalk": "^2.4.2",
"chart.js": "^2.7.3",
"classnames": "^2.2.6",
"compression": "1.7.4",
"connected-react-router": "6.6.1",
"country-language": "^0.1.7",
"country-state-city": "^1.0.5",
"cross-env": "5.2.0",
"date-fns": "2.1.0",
"detect-browser": "^4.0.0",
"dotenv": "^6.0.0",
"downshift": "^1.31.12",
"draft-js": "^0.11.7",
"draft-js-inline-toolbar-plugin": "^3.0.0",
"draft-js-plugins-editor": "^2.1.1",
"draftjs-to-html": "^0.8.3",
"draftjs-to-markdown": "^0.5.1",
"emailjs-com": "^2.6.4",
"express": "4.16.4",
"file-saver": "^2.0.2",
"fontfaceobserver": "2.1.0",
"formik": "^2.1.4",
"geo-reverse": "^1.0.12",
"google-libphonenumber": "^3.2.13",
"history": "4.9.0",
"hoist-non-react-statics": "3.3.0",
"html2canvas": "^1.0.0-rc.7",
"immer": "3.0.0",
"immutable": "3.8.2",
"interactjs": "^1.10.11",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"jspdf": "^2.3.1",
"jss": "^10.0.0",
"jss-rtl": "^0.3.0",
"jwt-decode": "^3.1.2",
"keycode": "^2.2.0",
"leaflet": "^1.7.1",
"leaflet-control-geocoder": "^1.13.0",
"lodash": "^4.17.15",
"material-table": "^1.69.0",
"material-ui-color-picker": "^3.5.1",
"material-ui-pickers": "^2.2.4",
"minimist": "^1.2.5",
"moment": "^2.29.1",
"moment-weekday-calc": "^1.1.4",
"mui-datatables": "^2.13.1",
"net": "^1.0.2",
"nuxeo": "^3.17.0",
"profile-picture": "git+https://github.com/dsalvagni/react-profile-picture.git",
"prop-types": "15.7.2",
"rcolor": "^1.0.1",
"react": "16.8.6",
"react-anchor-link-smooth-scroll": "^1.0.11",
"react-animated-slider": "^2.0.0",
"react-autosuggest": "^9.3.4",
"react-big-calendar": "^0.19.1",
"react-calendar": "^2.17.4",
"react-chartjs-2": "^2.7.4",
"react-charts": "^1.0.10",
"react-clock": "^2.3.0",
"react-countup": "^3.0.3",
"react-dom": "16.8.6",
"react-draft-wysiwyg": "^1.12.13",
"react-dropzone": "^10.2.1",
"react-event-listener": "^0.6.1",
"react-google-maps": "^9.4.5",
"react-helmet": "6.0.0-beta",
"react-html5video": "^2.5.1",
"react-image-lightbox": "^5.1.1",
"react-images": "^1.1.7",
"react-intl": "2.8.0",
"react-ionicons": "^2.1.6",
"react-jss": "^10.0.0",
"react-leaflet": "^2.7.0",
"react-loadable": "^5.5.0",
"react-markdown": "^4.1.0",
"react-modal": "^3.4.4",
"react-notifications-component": "^2.4.0",
"react-number-format": "^3.3.4",
"react-papaparse": "^3.8.0",
"react-pdf": "^5.0.0",
"react-pdf-print": "^0.2.0",
"react-player": "^2.9.0",
"react-popper": "^0.10.4",
"react-print-components": "^1.0.4",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.1",
"react-scroll-parallax": "^1.3.5",
"react-scrollspy": "^3.3.5",
"react-select": "^3.0.4",
"react-slick": "^0.23.1",
"react-swipeable-views": "^0.13.9",
"react-syntax-highlighter": "^7.0.0",
"react-text-mask": "^5.3.2",
"react-trello": "^1.33.0",
"react-ultimate-pagination": "^1.2.0",
"recharts": "^1.4.2",
"recompose": "^0.28.2",
"redux": "4.0.1",
"redux-form": "8.2.0",
"redux-immutable": "4.0.0",
"redux-saga": "1.0.2",
"reselect": "4.0.0",
"sanitize.css": "8.0.0",
"serve-favicon": "^2.4.5",
"slick-carousel": "^1.8.1",
"tunnel-agent": "^0.6.0",
"video-react": "^0.14.1",
"warning": "4.0.2",
"xlsx": "^0.16.6"
},
"devDependencies": {
"@babel/cli": "7.4.3",
"@babel/core": "7.4.3",
"@babel/plugin-proposal-class-properties": "7.4.0",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/plugin-transform-modules-commonjs": "7.4.3",
"@babel/plugin-transform-react-constant-elements": "7.2.0",
"@babel/plugin-transform-react-inline-elements": "7.2.0",
"@babel/preset-env": "7.4.3",
"@babel/preset-react": "7.0.0",
"@babel/register": "7.4.0",
"add-asset-html-webpack-plugin": "3.1.3",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-transform": "3.0.0",
"babel-plugin-styled-components": "1.10.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"babel-preset-es2015": "^6.24.1",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "3.0.0",
"coveralls": "3.0.3",
"css-loader": "2.1.1",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "3.3.4",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "4.1.0",
"eslint-import-resolver-webpack": "0.11.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "2.17.2",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "3.0.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "1.6.0",
"eslint-plugin-redux-saga": "1.0.0",
"eventsource-polyfill": "0.9.6",
"exports-loader": "0.7.0",
"file-loader": "3.0.1",
"happypack": "^5.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "4",
"http-proxy-middleware": "0.19.1",
"imports-loader": "0.8.0",
"lint-staged": "8.1.5",
"ngrok": "3.1.1",
"node-plop": "0.18.0",
"node-sass": "^4.12.0",
"null-loader": "0.1.1",
"offline-plugin": "5.0.6",
"optimize-css-assets-webpack-plugin": "5.0.1",
"plop": "2.3.0",
"postcss-loader": "3.0.0",
"pre-commit": "1.2.2",
"prettier": "1.17.0",
"prismjs": "^1.11.0",
"raw-loader": "2.0.0",
"react-app-polyfill": "0.2.2",
"react-test-renderer": "16.8.6",
"react-testing-library": "6.1.2",
"react-to-print": "^2.12.3",
"rimraf": "2.6.3",
"sass-loader": "^7.1.0",
"sass-material-colors": "0.0.5",
"shelljs": "^0.8.3",
"style-loader": "0.23.1",
"stylelint": "10.0.1",
"stylelint-config-recommended": "2.2.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.6.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.4.1",
"url-loader": "1.1.2",
"webpack": "4.30.0",
"webpack-cli": "3.3.0",
"webpack-dev-middleware": "3.6.2",
"webpack-hot-middleware": "2.24.3",
"webpack-pwa-manifest": "^4.3.0",
"whatwg-fetch": "3.0.0"
}
}
这是我的 webpack 结构
最后这是我 webpack.base.babel.js
的内容/**
* COMMON WEBPACK CONFIGURATION
*/
const path = require('path');
const webpack = require('webpack');
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });
module.exports = options => ({
mode: options.mode,
entry: options.entry,
output: Object.assign(
{
// Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
},
options.output,
), // Merge with env dependent settings
optimization: options.optimization,
module: {
rules: [
/*
Disabled eslint by default.
You can enable it to maintain and keep clean your code.
NOTE: By enable eslint running app process at beginning will slower
*/
/* {
enforce: 'pre',
test: /\.js?$/,
exclude: [/node_modules/],
loader: 'eslint-loader',
options: {
quiet: true,
}
}, */
{
test: /\.jsx?$/, // Transform all .js and .jsx files required somewhere with Babel
exclude: /node_modules/,
use: {
loader: 'happypack/loader?id=js',
options: options.babelQuery,
},
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
// Preprocess 3rd party .css files located in node_modules
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options:
{
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: false
}
}],
},
{
test: /\.md$/,
use: 'raw-loader'
},
{
test: /\.(jpg|png|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
},
},
/*
Disabled image compression by default,
due error in windows 10 because libpng not available.
The libpng avaible on Linux and Mac system only.
NOTE: To enable this, first you need to install image-webpack-loader.
npm install -i image-webpack-loader --save
*/
// {
// loader: 'image-webpack-loader',
// options: {
// mozjpeg: {
// enabled: false,
// // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
// // Try enabling it in your environment by switching the config to:
// // enabled: true,
// // progressive: true,
// },
// gifsicle: {
// interlaced: false,
// },
// optipng: {
// optimizationLevel: 7,
// },
// pngquant: {
// quality: '65-90',
// speed: 4,
// },
// },
// },
],
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
node: {
fs: 'empty'
},
plugins: options.plugins.concat([
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; Terser will automatically
// drop any unreachable code.
new HappyPack({
id: 'js',
threadPool: happyThreadPool,
loaders: ['babel-loader?cacheDirectory=true']
}),
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
}),
new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
if (!/\/moment\//.test(context.context)) { return; }
// context needs to be modified in place
Object.assign(context, {
// include only CJK
regExp: /^\.\/(ja|ko|zh)/,
// point to the locale data folder relative to moment's src/lib/locale
request: '../../locale'
});
})
]),
resolve: {
modules: ['node_modules', 'app'],
extensions: ['.js', '.jsx', '.react.js'],
mainFields: ['browser', 'jsnext:main', 'main'],
alias: {
'dan-components': path.resolve(__dirname, '../../app/components/'),
'dan-actions': path.resolve(__dirname, '../../app/actions/'),
'dan-redux': path.resolve(__dirname, '../../app/redux/'),
'dan-styles': path.resolve(__dirname, '../../app/styles/components/'),
'dan-api': path.resolve(__dirname, '../../app/api/'),
'dan-images': path.resolve(__dirname, '../../public/images/'),
'dan-vendor': path.resolve(__dirname, '../../node_modules/'),
}
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});
非常感谢 Whosebug
我添加了两个缺少 'transversal-administration'、'transversal-translation' 的文件夹，过去我只有：['app']。过去的加载程序只加载应用程序文件夹
env: {
production: {
// only: ['app'],
only: ['app', 'transversal-administration', 'transversal-translation'],
plugins: [
'lodash',
'transform-react-remove-prop-types',
'@babel/plugin-transform-react-inline-elements',
'@babel/plugin-transform-react-constant-elements',
],
},