《Survive JS - Webpack and React》 如何混用ES6中import和第三方库中require?

#1

最近看了一本书《Survive JS - Webpack and React》,里面的例子都是用ES6的方式写的,
import React from ‘react’;
export default class Notes extends React.Component {

}
这种,
webpack.config.js如下:

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var merge = require('webpack-merge');

var TARGET = process.env.npm_lifecycle_event;
var ROOT_PATH = path.resolve(__dirname);

var common = {
    entry: path.resolve(ROOT_PATH, 'app/main.jsx'),
    output: {
        path: path.resolve(ROOT_PATH, 'build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loaders: ['style', 'css'],
                include: path.resolve(ROOT_PATH, 'app')
            }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            title: 'Kanban app'
        })
    ]
};

if (TARGET === 'start' || !TARGET) {
    module.exports = merge(common, {
        devtool: 'eval-source-map',
        module: {
            loaders: [
                {
                    test: /\.jsx?$/,
                    loaders: ['react-hot', 'babel'],
                    include: path.resolve(ROOT_PATH, 'app')
                }
            ]
        },
        devServer: {
            colors: true,
            historyApiFallback: true,
            hot: true,
            inline: true,
            progress: true
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin()
        ]
    });
}

现在的问题是,比如我要用其他第三方的库,比方说react-widgets,但是它不是这种风格的,是用require来载入的,那么我怎么样才能兼容这种第三方组件库来使用呢?
我一使用
import ‘react-widgets/dist/css/react-widgets.css’;
就说webpack-dev-server

node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81
		r.forEach(function(r) {
		  ^
TypeError: undefined is not a function
#2

import 和 require其实是一样的,只是写法不一样

var React = require('react')
//这句等价于
import React from require('react')

这两句,在功能上完全没任何区别

#3

感谢指点,
就是不明白使用第三方的css时,怎么配置loader,不管怎么弄,都报错。

#4

你这样配置css是没错的,可能你的webpack没装好呢,或者你有没有安装那两个loader

#5

Survive JS - Webpack and React
哪里可以下这本书?

#6
#7

webpack没装好?不懂
loader我都装好了呀,这个报错真是让人摸不着头脑。

#8

有pdf版的吗?

#9

按照README自己生成即可,可PDF,可MOBI

#10

你看看我的webpack配置行不行…
/**

  • Created by 三寸天堂 on 2015/8/27.
    */
    ‘use strict’;

var path = require(‘path’);
var webpack = require(‘webpack’);
var svgoConfig = JSON.stringify({
plugins: [
{removeTitle: true},
{convertColors: {shorthex: false}},
{convertPathData: false}
]
});

module.exports = {
devtool:‘eval’,
entry:[
‘webpack-dev-server/client?http://localhost:3000’,
‘webpack/hot/only-dev-server’,
‘./public/main’
],
output:{
path:path.join(__dirname,‘build’),
filename:‘bundle.js’,
publicPath:’/static’ /html引入bundle.js位置/
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve:{
extensions:[’’,’.js’,’.jsx’]
},
module:{
loaders:[{
test: /.jsx?$/,
loaders: [‘react-hot’, ‘babel’],
exclude:/node_modules/,
include: path.join(__dirname, ‘public’)
},{
test: /.css?$/,
loaders: [‘style’, ‘raw’],
include: path.join(__dirname,‘public’)
},{
test: /.svg$/,
loaders: [‘file-loader’, ‘svgo-loader?’ + svgoConfig],
include: path.join(__dirname,‘public/images’)
}]
}
};

#11

这样说比较好一点,从https://github.com/survivejs/webpack_react/tree/master/project_source/05_react_and_flux/kanban_app这个现存的项目中集成http://jquense.github.io/react-widgets/docs/#/这个组件的话,应该怎么配置webpack.config.js?

#12

你可以參考作者提供的 redux demo

#13

入门好书。

#14

在哪里可以下载到这本书?

#15

去https://github.com/survivejs/webpack_react下载代码,自己生成PDF或者其他版本,或者你留个邮箱,我直接发你

#16

lz我的邮箱435859887@qq.com,求pdf文件

#17

649718037@qq.com,求pdf文件, ths

#18

感谢lz,已收到

#19

113406790@qq.com

#20

39929095@qq.com,谢谢,自己生成总是不成功