Another ParseError: 'import' and 'export' may appear only with 'sourceType: module' :(
Another ParseError: 'import' and 'export' may appear only with 'sourceType: module' :(
我花了几天时间在互联网上搜索并寻找解决此问题的方法(请不要将其标记为重复!)。我正在尝试使用 ES6 导入:
import * as _ from 'underscore' <--- works
const test = _.clone({'2':1}); <--- works
import Bulma from '@vizuaalog/bulmajs'; <--- fails
我的 gulp 任务在 'import from bulmajs' 行编译失败;我得到了可怕的 "ParseError: 'import' and 'export' may appear only with '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
}
]
]
}
任何帮助将不胜感激,我觉得我已经阅读了所有相关的 thread/SO post,但仍然没有找到解决方案。
Babelify 默认不处理任何 node_modules 因为通常有数以万计的文件需要处理。因为bulmajs的源码是用es6-dependent javascript写的(下划线不是这样!),所以也需要babel化。您的 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
我花了几天时间在互联网上搜索并寻找解决此问题的方法(请不要将其标记为重复!)。我正在尝试使用 ES6 导入:
import * as _ from 'underscore' <--- works
const test = _.clone({'2':1}); <--- works
import Bulma from '@vizuaalog/bulmajs'; <--- fails
我的 gulp 任务在 'import from bulmajs' 行编译失败;我得到了可怕的 "ParseError: 'import' and 'export' may appear only with '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
}
]
]
}
任何帮助将不胜感激,我觉得我已经阅读了所有相关的 thread/SO post,但仍然没有找到解决方案。
Babelify 默认不处理任何 node_modules 因为通常有数以万计的文件需要处理。因为bulmajs的源码是用es6-dependent javascript写的(下划线不是这样!),所以也需要babel化。您的 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