2

使用 webpack 创建用于开发和部署的单个包很容易。我希望能够将外部依赖项放入它自己的包中。因此，我有“external-bundle.js”和“index-bundle.js”。我遇到的问题是获得完整的解决方案。我有可行的解决方案，但它需要一个小的改进。

我使用 babel 编写所有代码，所有代码都存储在扩展名为 .es 的文件中。

这是我的目录树：

/index.html
/wap/index.es
/wap/other.es
/lib/index-bundle.js

我的 webpack.config.js：

var path = require('path');

module.exports = {
    entry: { index: './wap/index.es' },
    output: {path: 'lib',filename: "[name]-bundle.js"},
    module: {
        loaders: [
        {
            loader: 'babel-loader',
            test: /\.es$/,
            include: [
                path.resolve(__dirname, "wap"),
            ],
        }
        ]
    },
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
        'redux': 'Redux',
        'react-redux': 'ReactRedux',
        //'redux-thunk': 'thunkMiddleware', // can't load CommonJS
        //'react-google-charts': {
        //  root: "react-google-charts",
        //  commonjs2: "Chart",
        //  amd: "Chart"
        //}
    },
    resolve: {
        // allows babel module to find files
        extensions: ['', '.js', '.es']
    }
};

和 babel 配置以确保完整性：

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-es2015-modules-commonjs"]
}

我成功地将外部库包含在 index.html 中：

<script src="node_modules/react/dist/react.js"></script>
<script src="node_modules/react-dom/dist/react-dom.js"></script>
<script src="node_modules/redux/dist/redux.js"></script>
<script src="node_modules/react-redux/dist/react-redux.js"></script>

剩下的就是 redux-thunk 和 react-google-charts。我没有包含那些使用 html 脚本标签的模块，因为这些模块只是 CommonJS。您可以看到注释掉的外部部分，因为我无法弄清楚参考格式。

所以，我唯一简单的选择是让这些文件被 webpack 包含，因为 ES6 代码也被编译成 commonJS。

理想情况下，我想将所有外部依赖项放入外部包中，并将其与 HTML 文件中的脚本标记一起包含。我会为我正在处理的代码创建一个包。我可以将这个解决方案与 browserify 一起使用，但我无法用 webpack 解决这个问题。我什至为外部包创建了一个单独的配置文件，但我的代码未能在外部包中找到对象。

这两个问题有点联系。我需要帮助：

  1. 从我的索引包中外部化 redux-thunk 和 react-google-charts。
  2. 只买两包

我现在没有使用 RequireJS，我希望现在不要开始使用它。

谢谢

4

0 回答 0