[英]ParseError: 'import' and 'export' may appear only with 'sourceType: module', browserify
[英]NPM + Browserify error: ParseError: 'import' and 'export' may appear only with 'sourceType: module'
我有两个简单的 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 文件。 这段代码有什么问题? 非常感谢您的帮助。
所以 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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.