Ng-Lightning ParseError 'import' 和 'export' 可能只出现在 'sourceType: module'答案

【问题标题】：Ng-Lightning ParseError 'import' and 'export' may appear only with 'sourceType: module'Ng-Lightning ParseError 'import' 和 'export' 可能只出现在 'sourceType: module'
【发布时间】：2017-10-06 17:29:04
【问题描述】：

我在我的 Angular 4 应用程序中使用 ng-lightning 组件。我正在尝试构建一个捆绑包以部署到 Tomcat 服务器。我收到以下错误。通过谷歌搜索，似乎 ng-lightning 可能是 ES6，我需要将其 babelify 为 ES5。我在 package.json 文件中尝试了以下脚本，但仍然遇到同样的错误。

C:\myapp\node_modules\ng-lightning\ng-lightning.js:1 从'@angular/core'导入{ NgModule }； ^ ParseError: 'import' 和 'export' 可能只与 'sourceType: module' 一起出现

"clean": "rmdir /S /Q dist",
"newbuild": "npm run clean && tsc -p src/ --outDir dist",
"build_prod": "npm run newbuild && browserify -s main src/main.js > dist/bundle.js -t [ babelify --presets [ es2015 react ] ] && npm run minify",
"minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js",

ng-lightning 需要不同的预设吗？我没有为此使用 Webpack。我试过了，但我遇到了一组不同的错误，而且我还没有完全学会如何使用 Webpack。感谢您的帮助。

【问题讨论】：

标签： angular ng-lightning

【解决方案1】：

问题是 ng-lightning 是一个 es6 包，我需要使用带有 es2015 预设的“babelify”。我还需要稍微编辑一下脚本。我必须编辑的最后一项是 ng-lightning 的 package.json 文件。我需要在该文件中包含一个“浏览器化”转换以使其成功捆绑。这个编辑是我之前遗漏的关键部分。

ng-lightning package.json：

"browserify": {
    "transform": [["babelify", { "presets": ["es2015"] }]]
},

app package.json “脚本”：

"clean": "rimraf dist",
"newbuild": "npm run clean && tsc -p src/",
"build_prod": "npm run newbuild && mkdir dist && browserify -s main -e src/main.js -t [ babelify --presets [ es2015 ] ] -o dist/app-bundle.js && npm run minify", 
"minify": "uglifyjs dist/app-bundle.js --screw-ie8 --compress --mangle --output dist/app-bundle.min.js"

app package.json "devDependencies":

"babel-preset-es2015": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^14.4.0",
"rimraf": "^2.6.1",

【讨论】：