sunshinewyf / react-cms Goto Github PK

a simple demo of react

JavaScript 96.02% CSS 3.98%

react-cms's Introduction

react-cms

a simple demo for developers to use react + redux + typescript + antd

Installation

npm install

Run

npm start

And now you can visit http://localhost:3000

react-cms's People

Contributors

Watchers

react-cms's Issues

组件文件后缀为jsx时，进行import报错

刚开始的 webpack 配置如下：

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

module.exports = {
    entry: {
        bundle: path.join(__dirname, 'src/index.jsx'),
        vendor: [
            'react',
            'react-dom'
        ]
    },
    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].js'
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url?limit=50000'
            }
        ]
    },
    devServer: {
        port: 3000,
        historyApiFallback: true,
        contentBase: path.join(__dirname, './dist')
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({ names: ['vendor'] }),
        // new ExtractTextPlugin({ filename: '[name].css', allChunks: true }),
    ],

    resolve: {
        // extensions: ['.js','.jsx'],
        alias: {
            components: path.join(__dirname, 'src/components'),
            router: path.join(__dirname, 'src/router'),
            pages: path.join(__dirname, 'src/pages'),
            actions: path.join(__dirname, 'src/actions'),
            reducers: path.join(__dirname, 'src/reducers'),
            stores: path.join(__dirname, 'src/stores'),
        }
    }
}

然后在新添某个组件的时候，定义组件的名字为 **.jsx，例如 Header.jsx，最简代码如下：

import React, { Component } from 'react';
import './Header.less'

export default class Header extends Component {
    constructor(){
        super();
    }
    render() {
        return (
            <header className="header-container">
                <p>this is the header container</p>
            </header>
        )
    }

}

然后在某个 page页面进行 import的时候出错：can't find the Header module，找了半天不知道哪里出了问题，用babel-loader进行编译的时候，应该会把jsx文件编译成js文件才对，最后才知道是因为webpack的配置选项resolve中没有添加extensions这一个配置，也就是你在每次进行import Header from 'components/Header/Header'的时候，会不知道是什么文件export出的Header对象

加上extensions:['.js','.jsx']就好了

引用 antd 并在配置的时候报错

引入ant-design的时候如果单独引入对应的组件以及相应的css的时候是可以正常运行的，例如：

import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);

import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

但是最后在使用babel-plugin-import这个库的时候，在.babelrc中进行如下配置的时候：

{
  "presets": [
    "react",
    "es2015",
    "stage-2"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": 'css'
      }
    ]
  ]
}

最后webpack打包的时候报错Module parse failed: Unexpected character '@'，因为我的webpack中配置是针对less的样式文件进行编译的，因为引入的ant-design的css文件，所以编译不了而报错

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

module.exports = {
    entry: {
        bundle: path.join(__dirname, 'src/index.jsx'),
        vendor: [
            'react',
            'react-dom'
        ]
    },
    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].js'
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url?limit=50000'
            }
        ]
    },
    devServer: {
        port: 3000,
        historyApiFallback: true,
        contentBase: path.join(__dirname, './dist')
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({ names: ['vendor'] }),
        // new ExtractTextPlugin({ filename: '[name].css', allChunks: true }),
    ],

    resolve: {
        extensions: ['.js','.jsx'],
        alias: {
            components: path.join(__dirname, 'src/components'),
            router: path.join(__dirname, 'src/router'),
            pages: path.join(__dirname, 'src/pages'),
            actions: path.join(__dirname, 'src/actions'),
            reducers: path.join(__dirname, 'src/reducers'),
            stores: path.join(__dirname, 'src/stores'),
        }
    }
}

解决办法就是讲.babelrc中的配置改为如下就ok了:

{
  "presets": [
    "react",
    "es2015",
    "stage-2"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

sunshinewyf / react-cms Goto Github PK

react-cms's Introduction

react-cms

Installation

Run

react-cms's People

Contributors

Watchers

react-cms's Issues

组件文件后缀为jsx时，进行import报错

引用 antd 并在配置的时候报错

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent