编译element-react 1.0.7 中踩的坑

[abeet]

官方没有默认带上webpack配置，需要自己写

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 引入css 单独打包插件

var config = {
  entry : {
    index : path.join(__dirname, 'src/')
  },
  output : {
    path : path.join(__dirname, 'dist'),
    library: 'ElementReact',//导出为库，在全局下可通过 ElementReact 引用到
    filename : 'bundle.js'
  },
  externals : {//不打包React，而是引用全局变量
    react : 'React',//有一个js名为 react.js，里面又 import React from 'react'，让webpack编译出错了
    'react-dom' : 'ReactDOM'
  },
  resolve : {
    extensions : ['.js', '.jsx']
  },
  module : {
    noParse : [/react.js|react-dom.js/],
    loaders : [{
        test : /\.js|jsx$/,
        loader : 'babel-loader',
        exclude : /node_modules/,
        include: [
          path.join(__dirname, 'src/'),
          path.join(__dirname, 'libs/')
        ],
        query : {
          presets : [
            ['es2015', {
                'modules' : false,
                'loose' : true
              }
            ], "stage-1", "react" //stage-1是必须的，不然有 state: State; 这样的语法编译错误
          ]
        }
      }, {
        test : /\.css$/,
        loader : ExtractTextPlugin.extract({
          fallback : 'style-loader', //这是webpack2要求的语法
          use : 'css-loader'
        })
      }, {
        test : /\.scss$/,
        loader : ExtractTextPlugin.extract({ //这是webpack2要求的语法
          fallback : 'style-loader',
          use : [{
              loader : 'css-loader'
            }, {
              loader : 'sass-loader'
            }
          ]
        })
      }, {
        test : /\.(png|jpe?g|gif)(\?.*)?$/,
        loader : 'url-loader',
        query : {
          limit : 5000, // 换成你想要得大小
          name : 'images/[name].[ext]?[hash:10]'
        }
      }, {
        test : /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
        loader : 'file-loader',
        query : {
          limit : 5000, // 换成你想要得大小
          name : 'fonts/[name].[ext]?.[hash:7]'
        }
      }
    ]
  },
  plugins : [
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),// 不启用 react-hot-loader/babel， 不知为何失败了。。。
    new ExtractTextPlugin({
      filename : 'bundle.css'
    }),
    new webpack.optimize.UglifyJsPlugin({
      mangle : {
        keep_fnames : true
      },output: {
        comments: false
      }
    })
  ]
}

module.exports = config;

尤其要注意的是， element-react-1.0.8\libs\utils\react.js
这个js的命名会导致webpack出错，
import React from 'react'
编译为
var React = require("react")
而没有编译为var React = webpack_require("react")
这可能只是存在于特定版本下的webpack中的问题，此处为webpack 2.6
结果是把react.js重命名为 firstChild.js
然后 element-react-1.0.8\libs\utils\index.js 中
import * as ReactUtils from './react'
改为
import * as ReactUtils from './firstChild'
终于编译成功。

执行前先设置
set NODE_ENV=production
webpack --progress

在浏览器执行又出现这个错误

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'

webpack/webpack#4039
提到，require 和 export不能混用
import 和 module.exports不能混用
这可能只是存在于特定版本下的webpack中的问题，此处为webpack 2.6
把
element-react-1.0.8\libs\props\range.js
element-react-1.0.8\libs\props\regex.js
中的
import { createPropType } from '../utils';
改为
var createPropType = require('../utils').createPropType;