Question

我尝试将基于AMD / require.js和Ace编辑器的旧项目迁移到webpack。运行webpack后，出现以下错误，我无法弄清楚如何修复它们。

输出：

ERROR in ./src/lib/custom-ace.js
Module not found: Error: Can't resolve 'ace' in '.../src/lib'
 @ ./src/lib/custom-ace.js 2:0-12:2
 @ ./src/index.js

ERROR in ./src/lib/custom-ace.js
Module not found: Error: Can't resolve 'jquery' in '.../src/lib'
 @ ./src/lib/custom-ace.js 2:0-12:2
 @ ./src/index.js

src / index.js

require(["lib/custom-ace"], function(customAce) {
    editor = customAce.createEditor({})
})

src / lib / custom-ace.js：

define([
    'jquery',
    'ace' // <-- is this correct?
], function(jQuery, ace) {

    var exports = {};

    exports.createEditor = function(options) {
    }
    return exports;
});

package.json：

{
  "name": "test",
  "version": "0.1.0",
  "dependencies": {
    "ace": "^1.3.0",
    "ace-builds": "^1.4.4"
  },
  "devDependencies": {
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.2"
  }
}

Webpack.config.js：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
      modules: [
        path.resolve('./node_modules'),
        'src/lib/*.js',
        path.resolve('./src')
      ],
      extensions: ['.js'] // File types
    }
};

Answer 1

从package.json中删除ace，因为它不是

import ace from "ace-builds"
ace.edit(element, options)

如果要自动加载模式，请安装文件加载器Webpack插件并使用

import "ace-builds/webpack-resolver"

类似于https://github.com/nightwing/ace-webpack-demo

如何使用ace编辑器将AMD定义转换为webpack？

1 个答案: