vue + webpack：SyntaxError：字符类中的无效范围答案

【问题标题】：vue + webpack: SyntaxError: invalid range in character classvue + webpack：SyntaxError：字符类中的无效范围
【发布时间】：2019-07-02 11:13:58
【问题描述】：

我正在开发 webpack 4.29.3 和 vue.js 2.6.3。我只是尝试使用 vue js 和 webpack 创建一个简单的 hello world 项目。我希望index.html 能够很好地呈现。但是我得到了错误： SyntaxError: invalid range in character class 这真的很奇怪，因为我没有对正则表达式做任何事情。这就是为什么我不确定要修复哪个部分。

vue-first.js：

import Vue from 'vue';

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

index.html:

<!doctype html>
<html>
 <head>
   <title>Getting Started</title>
 </head>
 <body>
   <div id="app">
     {{ message }}
   </div>
   <script src="todo.js"></script>
 </body>
</html>

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/js/vue-first.js',
  output: {
    filename: 'todo.js',
    path: path.resolve(__dirname, 'dist')
  }
};

package.json

{
  "name": "vue-first",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "vue": "^2.6.3"
  }
}

完整的错误信息（来自 Safari）：

[Error] SyntaxError: Invalid regular expression: range out of order in character class
    RegExp (todo.js:7:3226)
    (anonymous function) (todo.js:7:3226)
    (anonymous function) (todo.js:7:63703)
    n (todo.js:1:115)
    (anonymous function) (todo.js:7:63775)
    n (todo.js:1:115)
    (anonymous function) (todo.js:1:904)
    Global Code (todo.js:1:912)

更多详情，您可以查看我的Github。

【问题讨论】：

你是从 webpack 还是从浏览器收到错误的？它指的是哪个源代码行？（这个错误看起来像是一个正则表达式语法问题，但这里发布的代码中没有正则表达式。）
来自浏览器。 npm run build 和 npx webpack 工作正常。它发生在todo.js 的第 7 行。我已经列出了完整的错误消息。提前谢谢你。
todo.js 中有什么内容？（您的 github 存储库中没有此类文件。）并为您的 JS 启用地图文件，以便浏览器可以为您提供预压缩/打包源代码参考。
它是 webpack 的输出。它是包含 Vue.js 和 vue-first.js 的缩小代码。这就是为什么我没有把它推到 Github 上。但为了您的方便，我现在推送了它。

标签： javascript vue.js webpack

【解决方案1】：

看来您至少需要指定构建 mode 并告诉 Webpack 使用其内置优化并为 Vue 添加一个 alias。

const path = require('path');

module.exports = {
  mode: 'development',

  entry: './src/js/vue-first.js',
  output: {
    filename: 'todo.js',
    path: path.resolve(__dirname, 'dist')
  },

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
  }
};

【讨论】：

我需要指定构建mode 是有道理的。但我不知道为什么我们需要resolve 部分。我在 vue-first.js 中导入了 Vue。我认为这使得 Webpack 将 vue-first.js 和 vue.js 添加到 todo.js 中。而且我没有目录vue/dist。
@inherithandle 如果没有alias，您必须输入完全限定名称，例如import Vue from 'vue/dist/vue.js'。它只是用于更轻松地导入或需要某些模块。
and I don't have the directory vue/dist NPM 会在您运行 npm install) 时为您创建它——看看 node_modules/vue/dist/...
感谢您提及。现在我明白有什么问题了。我认为 ES6 导入语句会像 node.js 中的 require 函数一样工作，并且会自动从 node_modules 找到 Vue 实例。
嗯.. 我认为它会工作。它没有。你能帮帮我吗？我尝试了resolve 和一些导入语句，如import Vue from vue/dist/vue.js、import Vue from 'node_modules/vue/dist/vue.js'、'./vue/dist/vue.js'、'./node_modules/vue/dist/vue.js'。它们都不适合我。