gulp - 另一个 ParseError: 'import' 和 'export' 可能只出现在 'sourceType: module' 中:(
问题描述
我花了几天时间在互联网上搜索并寻找解决此问题的方法(请不要将其标记为重复!)。我正在尝试使用 ES6 导入:
import * as _ from 'underscore' <--- works
const test = _.clone({'2':1}); <--- works
import Bulma from '@vizuaalog/bulmajs'; <--- fails
我的 gulp 任务无法在“从 bulmajs 导入”行编译;我得到了可怕的“ParseError:'import'和'export'可能只出现在'sourceType:module'中”:(
这是 gulp 任务:
browserify(./src/js/index.js', {debug: true})
.transform(babelify.configure())
.bundle().on('error', function (err) {
console.log(err); <--- error thrown here
})
.pipe(source('index.js')) // Readable Stream -> Stream Of Vinyl Files
.pipe(buffer()) // Vinyl Files -> Buffered Vinyl Files
.pipe(sourcemaps.init().on('error', function (e) {
console.log(e);
}))
.pipe(uglify().on('error', function (e) {
console.log('here')
console.log(e);
}))
.pipe(rename({extname: '.min.js'}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(./prod/js'));
我很想继续使用 babel v7,但看不出我的 task/package.json 有什么问题(尤其是在下划线导入有效的情况下)。
这是我的 package.json:
"dependencies": {
"@vizuaalog/bulmajs": "^0.7.0",
"bulma": "^0.7.2",
"underscore": "^1.9.1"
}
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"autoprefixer": "^9.2.1",
"babel-eslint": "^10.0.1",
"babelify": "^10.0.0",
"browserify": "^16.2.3",
"browserify-css": "^0.14.0",
"browserify-shim": "^3.8.14",
"eslint": "^5.7.0",
"fancy-log": "^1.3.2",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^6.0.0",
"gulp-clean-css": "^3.10.0",
"gulp-csso": "^3.0.1",
"gulp-imagemin": "^4.1.0",
"gulp-newer": "^1.4.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"gulplog": "^1.0.0",
"node-sass": "^4.9.3",
"path": "^0.12.7",
"run-sequence": "^2.2.1",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"browserify": {
"debug": true,
"transform": [
[
"browserify-css",
{
"autoInject": true,
"minify": true
}
],
[
"babelify",
{
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs",
"targets": {
"browsers": [
"last 5 versions",
"safari >= 7"
]
}
}
]
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread"
],
"sourceMaps": true
}
]
]
}
任何帮助将不胜感激,我觉得我已经阅读了每个相关的线程/SO帖子,但仍然没有找到解决方案。
解决方案
Babelify 默认不处理任何 node_modules,因为那里通常有数以万计的文件要处理。因为bulmajs的源码是用es6依赖的javascript写的(不是下划线的情况!),所以也需要babel-ified。您的 gulp 任务应包括以下内容:
browserify('./src/js/index.js', {debug: true})
.transform(babelify, {
global: true, // babelify EVERYTHING!!
ignore: [/\/node_modules\/(?!@vizuaalog\/)/], // just kidding, only babelify the one module we need
presets: ["@babel/preset-env"]
})
.bundle().on('error', function (err) {
console.log(err);
})
这是我在调试此问题时创建的存储库,以防任何人感兴趣(不要指望任何令人兴奋的事情)https://github.com/Hypaethral/bulmajs-browserify-mvp-example
推荐阅读
- amazon-web-services - Amazon Beanstalk 获取访问者 IP 地址 (React - Docker)
- vue.js - 无法通过 npm 安装 firebase
- vue.js - 如何通过其 id 选择一个复选框并调用 setChecked?
- python - 如何在 Django Admin 中显示多对多模型中的所有字段
- angular - “对象”类型上不存在角度属性“值”
- arrays - 角度克隆数组仍然修改父
- flutter - http.get 导致日文文本混乱
- sas - SAS - 根据日期引用文件夹
- asp.net-core - HttpClient.GetAsync 返回带有空头的 HttpResponseMessage
- json - 如何让 Serilog json 格式的日志在 Datadog 中正确显示