我正在研究React JS应用程序。使用grunt build构建代码时，出现以下错误：
Running "requirejs:compile" (requirejs) task Error: Cannot uglify file: C:/Dev/first-research/first-research-min.js. Skipping it. Error is: SyntaxError: Unexpected token: name (ClassicEditor) If the source uses ES2015 or later syntax, please pass "omptimize: 'none'" to r.js and use an ES2015+ compatible minifier after running r.js. The included UglifyJS only understands ES5 or earlier syntax.
附加了参考的Webpack，grunt，package.json和babel.rc文件
Webpack文件
const path = require('path'),
webpack = require('webpack'),
MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
process.env.NODE_ENV = 'development';
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'app',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
mode: 'development',
entry: {
'app': './src/app'
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.scss', '.css'],
modules: ['./node_modules']
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name]-bundle.js',
libraryTarget: 'amd'
},
module: {
rules: [
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: [ 'raw-loader' ]
},
{ // To process CKEditor CSS files.
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
use: [
{
loader: 'style-loader',
options: {
singleton: true
}
},
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
},
minify: true
} )
}
]
},
// ESlint loader
{
test: /\.(js|jsx)$/, // include .js and .jsx files
use: [
'eslint-loader'
],
enforce: 'pre',
exclude: /node_modules/ // exclude any and all files in the node_modules folder
},
// ES6 loader
{
test: /\.(js|jsx)$/,
exclude: /node_modules/, // exclude any and all files in the node_modules folder
use: {
loader: 'babel-loader',
options:{
presets: ['env']
}
}
},
// Style loader other than CK5 editor CSS files.
{
test: /\.css$/,
exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
test: /\.scss$/,
exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.scss/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000
}
}]
},
// html loader
{
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
minimize: true,
}
}]
},
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep the "css" loader working as it injects
// its runtime that would otherwise be processed through the "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpack's internal loaders.
exclude: [
/\.(js|jsx|mjs)$/,
/\.html$/,
/\.json$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
/(node_modules)/,
/\.css$/
],
options: {
name: 'static/media/[name].[hash:8].[ext]'
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name]-bundle.css',
}),
new webpack.LoaderOptionsPlugin({ options: {} }),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/)
// new CKEditorWebpackPlugin( {
// language: 'pl'
// })
],
externals: [
/^user-profile/, //OK
/^settings\/settings/, //OK
/^am-permissions\/permission/, //OK
/^logger\/log/, //OK
/^am-permissions/, //OK
/^am-address/, //OK
/^am-alerter/, //OK
/^amfx-blotter-grid\//, //OK
/^amfx-blotter-grid-components\//, //OK
/^amfx-blotter-filters\//, //OK
/^amfx-react-components\//, //OK
/^menu\//, //OK
'react', //OK
'react-dom', //OK
'prop-types', //OK
/^jquery$/, //OK:
/^underscore$/, //OK:
/^lodash$/,
/^q$/, //OK:
/^d3$/, //OK:
/^text/, //OK:
/^d3-utils\//, //OK:
/^bootstrap\//, //OK:
/^moment$/, //OK:
/^am-modal\//, //OK
/^xhr-client\//, //OK
/^q\//, //OK
/^whatwg-fetch\//, //OK
'immutable', //OK
/^amfx-tab\//, //OK
/^fx-blotter\//, //OK
/^zap-tab-comms\//, //OK
/^trade-operations\// //OK
],
devtool: 'source-map',
resolveLoader: {
alias: {
'css/css': 'style-loader'
}
}
};
package.json
{
"name": "first-research",
"version": "0.1.18",
"description": "first-research: Built using the Zambezi Platform",
"main": "dist/react-your-component-name.min.js",
"repository": {
"type": "git",
"url": "https://stash.dts.fm.rbsgrp.net/scm/amfirstresearch/first-research.git"
},
"scripts": {
"build": "webpack --progress --watch --config ./config/webpack.dev.js",
"test": "jest"
},
"devDependencies": {
"@ckeditor/ckeditor5-dev-utils": "^10.0.3",
"@ckeditor/ckeditor5-theme-lark": "^11.0.0",
"babel": "^6.1.18",
"babel-core": "^6.14.0",
"babel-eslint": "^6.1.0",
"babel-jest": "^15.0.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-es2015-node5": "^1.2.0",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.6.1",
"cross-env": "^1.0.8",
"css": "^1.0.7",
"css-loader": "^0.28.7",
"eslint": "^3.7.0",
"eslint-config-airbnb": "^10.0.1",
"eslint-loader": "^1.5.0",
"eslint-plugin-import": "^1.13.0",
"eslint-plugin-jsx-a11y": "^2.1.0",
"eslint-plugin-react": "^6.1.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"grunt": "^1.0.3",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-requirejs": "^1.0.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-webpack": "^3.0.2",
"identity-obj-proxy": "^3.0.0",
"jest": "^15.1.1",
"jest-static-stubs": "^0.0.1",
"lodash": "^4.17.10",
"mini-css-extract-plugin": "^0.4.1",
"moment": "^2.22.2",
"postcss-loader": "^3.0.0",
"raw-loader": "^0.5.1",
"react-addons-test-utils": "^15.3.1",
"react-test-renderer": "^15.3.1",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^4.16.5",
"webpack-merge": "^4.1.0",
"zambezi-contrib-build": "^2.1.3"
},
"dependencies": {
"@ckeditor/ckeditor5-adapter-ckfinder": "^10.0.2",
"@ckeditor/ckeditor5-autoformat": "^10.0.2",
"@ckeditor/ckeditor5-basic-styles": "^10.0.2",
"@ckeditor/ckeditor5-block-quote": "^10.0.2",
"@ckeditor/ckeditor5-build-classic": "^11.0.1",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^6.0.3",
"@ckeditor/ckeditor5-easy-image": "^10.0.2",
"@ckeditor/ckeditor5-editor-classic": "^11.0.0",
"@ckeditor/ckeditor5-essentials": "^10.1.1",
"@ckeditor/ckeditor5-heading": "^10.0.2",
"@ckeditor/ckeditor5-image": "^10.2.0",
"@ckeditor/ckeditor5-link": "^10.0.3",
"@ckeditor/ckeditor5-list": "^11.0.1",
"@ckeditor/ckeditor5-paragraph": "^10.0.2",
"@ckeditor/ckeditor5-react": "^1.0.0-beta.1",
"@zambezi/sdk": "^5.19.1",
"axios": "^0.18.0",
"enzyme": "^3.3.0",
"es6-promise": "^4.2.4",
"isomorphic-fetch": "^2.2.1",
"prop-types": "^15.6.2",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-modal": "^3.5.1",
"react-router-dom": "^4.3.1",
"react-tabs": "^2.2.2"
},
"_zambezi": {
"runtimeDependencies": [
"am-address",
"am-alerter",
"am-permissions",
"react",
"react-dom",
"css",
"lodash",
"prop-types"
]
},
"jest": {
"collectCoverage": true,
"moduleNameMapper": {
"^.+\\.(png|jpg|gif)$": "jest-static-stubs/$1",
"^.+\\.(eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy",
"^.+\\.(css|less)$": "identity-obj-proxy"
}
}
}
Grunt文件
module.exports = function (grunt) {
grunt.initConfig({
build: {
options: {
optimize: 'none',
include: ['first-research'],
plugins: {
'css/css': '../node_modules/css/css',
'settings/settings': 'empty:',
"am-permissions/permission": "empty:",
"user-profile/user-profile": "empty:",
"logger/log": "empty:"
}
}
},
webpack: {
dev: require('./config/webpack.dev.js'),
prod: require('./config/webpack.prod.js')
},
watch: {
files: ['src/**/*.js'],
tasks: ['webpack:dev', 'build']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-webpack');
grunt.loadNpmTasks('zambezi-contrib-build');
grunt.registerTask('default', ['webpack:dev', 'build']);
grunt.registerTask('ci-build', ['webpack:prod', 'build']);
};
babel.rc
{
"presets": [
"stage-0",
"react",
"es2015-node5"
],
"plugins": [
"transform-class-properties"
],
"sourceMaps": true
}