如何在 React 构建中禁用 Uglify

Question

我尝试使用 Y.js (Yjs) npm 包，它在 npm start 中有效，但在 npm run build 中无效，因为 Uglify 不支持 ES6。所以我下载了那个包的发行版并直接包含它。但是我的reactjs npm run build 还在抱怨Uglify.

Creating an optimized production build...
Failed to compile.

static/js/main.3d2ecf94.js from UglifyJs
SyntaxError: Unexpected token: name (YArray) [./src/Pages/Collaborative/y-array/y-array.es6:12,0]

我的 webpack.config.js 看起来像这样：

var path = require('path');

module.exports = {
  entry: path.join(__dirname, 'public', 'quickstart.js'),
  output: {
    path: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ["react", "es2016", "stage-2"]
        }
      },
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  }
}

如何在我的 webpack 中禁用 Uglify？哪一行决定在构建过程中必须进行Uglify？

编辑：

{
  "name": "myCoolApps",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "css-loader": "^0.26.1",
    "react-scripts": "0.7.0",
    "webpack": "^1.13.3"
  },
  "dependencies": {
    "ace": "git+https://github.com/ajaxorg/ace.git#master",
    "antd": "^2.7.2",
    "axios": "^0.15.3",
    "card": "^2.2.1",
    "card-react": "^1.2.6",
    "chat-template": "0.0.22",
    "codemirror": "^5.25.0",
    "credit-card-type": "^5.0.1",
    "css-loader": "^0.26.1",
    "d3": "^4.7.4",
    "firechat": "^3.0.1",
    "firepad": "^1.4.0",
    "flux": "^3.1.0",
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0",
    "history": "^1.17.0",
    "little-loader": "^0.2.0",
    "lodash": "^4.17.4",
    "material-ui": "^0.16.6",
    "moment": "^2.17.1",
    "node-sass": "^4.5.0",
    "quill": "^1.2.3",
    "rc-calendar": "^7.6.5",
    "react": "^15.5.4",
    "react-autosuggest": "^7.0.1",
    "react-cookie": "^1.0.4",
    "react-credit-card": "^0.20.0",
    "react-dom": "^15.5.4",
    "react-dropzone": "^3.8.0",
    "react-event-timeline": "^1.2.2",
    "react-infinite": "^0.10.0",
    "react-infinite-scroller": "^1.0.7",
    "react-list": "^0.8.3",
    "react-notification-system": "^0.2.12",
    "react-router": "^3.0.0",
    "react-tap-event-plugin": "^2.0.1",
    "seedrandom": "^2.4.2",
    "simplewebrtc": "^2.2.2",
    "style-loader": "^0.13.1",
    "superagent": "^3.3.1",
    "y-array": "^10.0.6",
    "y-indexeddb": "^8.1.9",
    "y-leveldb": "0.0.1",
    "y-map": "^10.0.5",
    "y-memory": "^8.0.8",
    "y-richtext": "^9.0.8",
    "y-text": "^9.3.2",
    "y-webrtc": "^8.0.7",
    "y-websockets-client": "^8.0.15",
    "yjs": "^12.1.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

实际上是的，我认为它使用了 react-script。我可以做些什么来改变它吗？

Answer 1

如果您查看 npm run build 的作用，它实际上运行另一个脚本 react-scripts build。您的项目是使用 create-react-app 引导的，对吗？

如您在 package.json 中所见，您还可以访问名为 eject.

的脚本

运行 npm run eject 将允许您从预配置的工作流程（webpack、babel 等）中删除应用程序，并允许您修改工作流程，如您所见适合。

通过访问配置文件，您可以添加，例如，babel uglify plugin。

但要小心，这是有取舍的。正如文档中提到的

If your project needs more customization, you can "eject" and customize it, but then you will need to maintain this configuration.

如何在 React 构建中禁用 Uglify

How to disable Uglify in react build

javascript

reactjs

webpack

uglifyjs