Question

我正在将我们的一个库转换为使用webpack（我们将代码从ES5移到ES6但仍需要部署具有ES5支持的库）。

该库是内部的，目前我们只是将它与源一起部署，因此在另一个使用它的库中我们可以这样做：

const library = require('library');
const dataSource = require('library/src/datasources/fooSource');

但是现在单个文件导出，第二行不再有效。我已经尝试将这些文件夹添加到resolve.modules中，但这似乎不起作用。

webpack配置看起来像这样，可能我们可以像上面那样做（但删除它的/src部分）？

const path = require('path');
const webpack = require('webpack');
const packageJSON = require('./package.json');

const CleanWebpackPlugin = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  name: 'engine',
  entry: {
      'engine': ['babel-polyfill', './src/index.js'],
      'engine-iframe': ['babel-polyfill', './src/index-iframe.js'],
  },
  target: 'web',
  devtool: 'sourcemap',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.js'],
    modules: [
        'node_modules',
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'src/core'),
        path.resolve(__dirname, 'src/datasource'),
        path.resolve(__dirname, 'src/events'),
        path.resolve(__dirname, 'src/plugins'),
        path.resolve(__dirname, 'src/strategies'),
        path.resolve(__dirname, 'src/util')
    ]
  },
  externals: [nodeExternals()],
  plugins: [
    new CleanWebpackPlugin('./dist'),
    new webpack.BannerPlugin({
      banner:
       `/**
         * ${packageJSON.name} - Copyright © ${new Date().getFullYear()}
         * Version ${packageJSON.value}
         * ${packageJSON.homepage}
         */
        `,
      raw: true,
      entryOnly: false
    }),
  ],
  module: {
    rules: [{
      test: /\.js?$/,
      exclude: /(node_modules)/,
      loader: 'babel-loader',
      options: {
        cacheDirectory: true
      }
    }]
  }
};

Answer 1

您导入/需要的模块是指路径。库不能改变该行为，唯一的方法是提供这些文件以及捆绑版本。这样做的一个很好的例子是Redux，它有一个simple build step。它使用babel来代码转换代码和Rollup而不是webpack，但概念是相同的。 Redux发布以下结构（完整源代码见unpkg - Redux）：

├─ dist
│  ├── redux.js
│  └── redux.min.js
├─ es
│  ├── applyMiddleware.js
│  ...
└─ lib
  ├── applyMiddleware.js
  ...

在dist/目录中有捆绑文件（常规和缩小）。在lib/中，有一个已编译的代码，预计会在Node中运行而不需要任何其他工具，而es/与lib/相同，只是它使用ES模块，而lib/ 1}}将其转换为require。有了它，您可以导入/需要redux/lib/applyMiddleware等。

您可以执行类似的操作，使用babel转换代码（如果您想使用一些较新的功能），这样您就可以直接导入所需内容并使用bundle作为主要入口点。

Answer 2

如果您真正关注的是ES2015 - ＆gt; ES5转换，并希望保留旧结构（并简单地从其中的模块中抓取），在这种情况下，使用babel作为独立工具会更好吗？

e.g。 nodes[]

使用webpack 2编译时导出内部库

2 个答案: