NPM + Browserify 错误：ParseError: 'import' 和 'export' 可能只出现在 'sourceType: module' 中

Posted 2023-02-19

【中文标题】NPM + Browserify 错误：ParseError: \'import\' 和 \'export\' 可能只出现在 \'sourceType: module\' 中

【英文标题】：NPM + Browserify error: ParseError: 'import' and 'export' may appear only with 'sourceType: module'NPM + Browserify 错误：ParseError: 'import' 和 'export' 可能只出现在 'sourceType: module' 中

【发布时间】：2020-11-03 13:21:31

【问题描述】：

我有两个简单的 js 文件。其中之一应该是导出其内容的模块，该模块将包含在 import 命令中。

第一个 testModule.js：

export function test() 
    console.log('teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest');

和 main.js：

import * as test from "../src/js/testModule.js"

test.test();

在 package.json 我有两个脚本命令。首先将 es6 翻译为 es5，然后将 es5 结果浏览器化，因为模块。第一个有效。但是第二个给我一个错误。

    "name": "examples-vue",
    "main": "index.js",
    "dependencies": 
        "bootstrap": "^3.4.1",
        "jquery": "^3.4.1",
        "vue": "^2.6.11"
    ,
    "devDependencies": 
        "@babel/cli": "^7.10.4",
        "@babel/core": "^7.10.4",
        "@babel/polyfill": "^7.10.4",
        "@babel/preset-env": "^7.10.4",
        "browserify": "^16.5.1",
        "core-js": "^3.6.5"
    ,
    "scripts": 
        "es5": "babel ./src/js/main.js -o ./js/main.es5.js",
        "browserify": "browserify ./js/main.es5.js -o ./js/bundle.js",
        "build": "npm run es5 && npm run browserify"
    

第一个命令的结果是这样的：

"use strict";

function _typeof(obj)  "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol")  _typeof = function _typeof(obj)  return typeof obj; ;  else  _typeof = function _typeof(obj)  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; ;  return _typeof(obj); 

var test = _interopRequireWildcard(require("../src/js/testModule.js"));

function _getRequireWildcardCache()  if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache()  return cache; ; return cache; 

function _interopRequireWildcard(obj)  if (obj && obj.__esModule)  return obj;  if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function")  return  default: obj ;  var cache = _getRequireWildcardCache(); if (cache && cache.has(obj))  return cache.get(obj);  var newObj = ; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj)  if (Object.prototype.hasOwnProperty.call(obj, key))  var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set))  Object.defineProperty(newObj, key, desc);  else  newObj[key] = obj[key];    newObj.default = obj; if (cache)  cache.set(obj, newObj);  return newObj; 

test.test();

第二个命令抛出错误：ParseError: 'import' and 'export' may appear only with 'sourceType: module'

在其他问题中仍然是相同的答案。 Browserify 不适用于 es6 语法。但它适用于 es5 文件。这段代码有什么问题？非常感谢您的帮助。

【问题讨论】：

***.com/a/34569845/1529413?

【参考方案1】：

所以 Browserify 的有效语法是

进口

import * as testModule from "./testModule.js";
import  test2module  from "./testModule2.js";

出口

module.exports.test = test;
module.exports.xxx = xxx;

或用于出口

export var test2module = 
    test2: test2,
    aaa: aaa