- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我花了几天时间在互联网上搜索这个问题的解决方案(请不要将其标记为重复!)。我正在尝试使用 ES6 导入:
import * as _ from 'underscore'; <--- works
const test = _.clone({'2':1}); <--- works
import Bulma from '@vizuaalog/bulmajs'; <--- fails
我的 gulp 任务无法在“从 bulmajs 导入”行编译;我收到可怕的“ParseError:'导入'和'导出'可能仅与'sourceType:模块'一起出现”:(
这是 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 化。你的 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
关于gulp - 另一个解析错误: 'import' and 'export' may appear only with 'sourceType: module' :(,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53037883/
在eslint中有没有办法像规则和环境设置一样在文件中设置sourceType? 有点像 /*eslint sourceType: "module"*/ 没看过作品 最佳答案 eslint 的一位团队
我们开始混入一些 es6 模块,当您在不使用 sourceType: 脚本的情况下使用 import/export 时,eslint 会公正地提示 Parsing error: 'import' an
我正在使用 Gulp , Browserify和 Babelify将我的源代码从 ES6 + JSX 编译为纯 Javascript。 我的 gulpfile.js 看起来像: var gulp =
我的项目对大部分文件使用 Webpack 和 es6 模块。这些文件在浏览器中运行,并由 Webpack 捆绑。 只有少数文件在节点中运行。 Webpack 没有触及它们,我看不到将它们包含在 web
我正在尝试搜索扩展某个接口(interface)的 IJavaProject 中的所有类。这个接口(interface)是Generic的,我想获取每个实现的当前类型参数。 现在我有了代表每个实现的
我正在尝试执行我认为是调整刚刚通过 UIImagePickerControllerSourceTypeCamera 拍摄的图像大小的简单任务。 拍完照片后,我想立即缩小它。我可以保持纵横比并将其缩小到
我想以恒定的频率检索 UIImage 以实现某些功能 if (!_updateTimer) { _updateTimer = [[NSTimer scheduledTimerWithTimeI
我希望用户能够使用相机但不能选择拍摄视频。目前,当用户启动相机时,照片和视频控件都会显示在 View 的左下角。下面是我的 launchCamera 和 imagePickerController 方
我目前正在使用 Google Cloud Functions 和 Firestore。但是我在尝试从父文档获取数据时遇到了问题。我已经在 Internet 上搜索了该问题,但似乎建议的修复方法都不适合
我花了几天时间在互联网上搜索这个问题的解决方案(请不要将其标记为重复!)。我正在尝试使用 ES6 导入: import * as _ from 'underscore'; Stream
我正在做一堆应用数学/信号处理/算法 C++ 代码。 我已经启用了 -Wconversion编译器警告捕获类型为 double 的数字的运行时转换等问题输入 int32_t . 显然,在这些转换过程中
我正在使用 Vue。这就是我在 gulpfile 中构建的方式: browserify('./main.js') .transform(vueify) .bundle() .pipe( fs.crea
我从 3.0.3 更新了 Cypress 至3.1.3 .我正在使用必须与文档相关的 ES6 导入/导出模块。但我收到了 undefined在终端中并在 GUI 中出现以下错误: /node_modu
在我的 gulpfile 中,我有 var gulp = require('gulp'); var browserSync = require('browser-sync').create(); va
考虑以下两个文件: app.js import Game from './game/game'; import React from 'react'; import ReactD
我有 2 个选项卡,一个包含 imagepicker Controller ,另一个包含 UItableView 作为 uiview Controller 的 subview 。 我意识到当我调用 i
我在 github 和 stackoverflow 上浏览过很多帖子。我的 package.json 中有以下开发依赖项,用于 es6 到 es5 的转换。 "babel-cli": "^6.26.0
背景 我正在使用 docusaurus ^1.14.0。我只使用 React。在我的 pages 中,我尝试使用基本的 import 语句从另一个文件导入组件来分离组件。但是,当我尝试 yarn st
当通过 angular-cli (ng test -cc) 运行具有代码覆盖率的测试时,karma 会抛出以下错误。罪魁祸首似乎是 istanbul 代码覆盖模块,因为在没有 -cc 的情况下运行测试
使用全新安装的 ionic2 开发新项目,安装 angular2-jwt 后出现此错误: ParseError: 'import' and 'export' may appear only with
我是一名优秀的程序员,十分优秀!