首页 > react组件打包时怎么去除第三方库?

react组件打包时怎么去除第三方库?

1、我想用webpack打包一个react组件,想在打包的时候把第三方库如(react、react-dom、jquery等)去除。这个在webpack中要怎么配置才好?
我原本这样配:

//webpack.config.js
externals = {
        "react": true,
        "react-dom": true,
        "jquery": true
    }

这样虽然可以在打包时把这三个去掉,但是我在其他地方用的时候就会报react is not defined
想问一下我应该怎么做才能达到我想要的效果呢?
2、下面是我写的组件的一部分:

import React from "react";
import Item from "./components/Item";
import classnames from "classnames";
import $ from "jquery";


class Menu extends React.Component{
     ...   
}

export default Menu;

@leftstick 正解。 顺便贴下我们组件库的实现。https://github.com/gmfe/react-gm/blob/master/webpack.config.js


把自己的解决方案贴出来把:
需要配置输出方式:

output: {
        path: path.resolve(__dirname, "dist"),
        filename: "components.js",
        libraryTarget: "umd",
        library: "Menu"
    }

还有externals应该是这样才是正确的:

externals: {
    "react": 'react',
    "jquery": 'jquery',
    'react-dom': 'ReactDOM'
}

试试:


externals: {
    react: 'react',
    jquery: 'jquery',
    'react-dom': 'react-dom'
}

module: {
    preLoaders: [
         loaders: [
            { 
            test: /\.js$/, 
            exclude: /node_modules/, 
            loader: 'react' 
            }
        ] 
    ]
}

exclude里面目录的引入文件不会被打包到代码中,可以先好好学一下webpack

【热门文章】
【热门文章】