Question

我找到了一个很棒的图书馆，可以让draft.js更好。

https://github.com/jpuri/react-draft-wysiwyg

我创建了一个项目，并且npm安装了这个库。

但在这个库的文件夹中，我试图重建dist文件夹，因为我在我的项目中自定义了一些设置。

当我运行 npm run build 时，它给了我一些错误：

ERROR in ./src/Editor/index.js
Module build failed: SyntaxError: Unexpected token (41:19)

  40 | export default class WysiwygEditor extends Component {
> 41 |   static propTypes = {
     |                    ^

我已经创建了node_modules＆amp;这个库文件夹中的config / webpack.config.js。

为什么会这样？

<小时/> 在以下内容中添加了 webpack.config.js ：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const precss = require('precss');

module.exports = {
    devtool: 'source-map',
    entry: [
        './src/index',
    ],
    output: {
        path: path.join(__dirname, '../dist'),
        filename: 'react-draft-wysiwyg.js',
        library: 'reactDraftWysiwyg',
        libraryTarget: 'umd',
    },
    externals: {
        react: 'react',
        immutable: 'immutable',
        'react-dom': 'react-dom',
        'draft-js': 'draft-js',
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production'),
            },
        }),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false,
            },
        }),
        new ExtractTextPlugin('react-draft-wysiwyg.css'),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [autoprefixer, precss],
            },
        })
    ],
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /immutable\.js$|draftjs-utils\.js$/ },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader?modules&importLoaders=1&localIdentName=[local]!postcss-loader',
                }),
            },
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml',
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.json'],
    },
};

Answer 1

似乎您不能以能够识别静态类属性的方式来转换代码。如果您使用的是babel，可以使用Class Property Transform启用它： https://babeljs.io/docs/plugins/transform-class-properties/

试图重建dist文件夹但失败了

1 个答案: