带有 requirejs/AMD 的 Webpack

Posted 2023-02-22

【中文标题】带有 requirejs/AMD 的 Webpack

【英文标题】：Webpack with requirejs/AMD

【发布时间】：2017-10-30 06:11:00

【问题描述】：

我正在为一个仍然使用 requireJS 进行模块加载的现有项目开发一个新模块。我正在尝试为我的新模块使用新技术，例如 webpack（它允许我使用 es6 加载器使用 es6 导入）。似乎 webpack 无法与 requireJS 语法协调一致。它会说：“未找到模块：错误：无法解析”。

问题：Webpack 不会捆绑包含 requireJS/AMD 语法的文件。问题：有什么方法可以让 webpack 与 requireJS 配合得很好？

我的最终输出必须是 AMD 格式，以便项目能够正确加载它。谢谢。

【问题讨论】：

你可以看看一些用于 webpack 的 babel 加载器。我有类似的问题，你通常可以使用 babel 在模块系统之间进行转换

我已经在我的 webpack 配置中使用了 babel loader

【参考方案1】：

我也有同样的问题，我设法做到了。下面是相同的webpack.config.js 文件。

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

let basePath = path.join(__dirname, '/');

let config = 
  // Entry, file to be bundled
  entry: 
    'main': basePath +  '/src/main.js',
  ,
  devtool: 'source-map',
  output: 
    // Output directory
    path: basePath +  '/dist/',
    library: '[name]',
    // [hash:6] with add a SHA based on file changes if the env is build
    filename: env === EnvEnum.BUILD ? '[name]-[hash:6].min.js' : '[name].min.js',
    libraryTarget: 'amd',
    umdNamedDefine: true
  ,
  module: 
    rules: [
      test: /(\.js)$/,
      exclude: /(node_modules|bower_components)/,
      use: 
        // babel-loader to convert ES6 code to ES5 + amdCleaning requirejs code into simple JS code, taking care of modules to load as desired
        loader: 'babel-loader',
        options: 
          presets: ['es2015'],
          plugins: []
        
      
    ,  test: /jQuery/, loader: 'expose-loader?$' , 
   test: /application/, loader: 'expose-loader?application' ,
   test: /base64/, loader: 'exports-loader?Base64' 
    ]
  ,
  resolve: 
    alias: 
        'jQuery': 'bower_components/jquery/dist/jquery.min',
        'application': 'main',
        'base64': 'vendor/base64'
    ,
    modules: [
      // Files path which will be referenced while bundling
      'src/**/*.js',
      'src/bower_components',
      path.resolve('./src')
    ],
    extensions: ['.js'] // File types
  ,
  plugins: [

  ]
;

module.exports = config;

【讨论】：

是否可以使用 Webpack Encore 做到这一点？