SyntaxError:“导入”和“导出”只能与“sourceType:module”一起出现-吞咽

旧版本的巴别塔随盒而来。新版本要求您安装安装程序需要的任何插件。首先,您需要安装ES2015预设。

npm install babel-preset-es2015 --save-dev

接下来,您需要告诉babelify使用您安装的预设。

return browserify({ ... })
  .transform(babelify.configure({
    presets: ["es2015"]
  }))
  ...

Source

ESLint本机不支持这一点,因为这违反了规范。但是如果您使用babel ESLint解析器,那么在您的ESLint配置文件中,您可以这样做:

{
    "parser": "babel-eslint",
    "parserOptions": {
        "sourceType": "module",
        "allowImportExportEverywhere": true
    }
}

文件编号: https://github.com/babel/babel-eslint#configuration

答案如下: ignore eslint error: 'import' and 'export' may only appear at the top level

我在尝试从中导入模块时遇到了相同的错误 node_modules 它以ES6风格输出。没有任何建议对我来说是有效的 babelify repo .根据那里的洞察,出现错误是因为来自 node_modules 默认情况下不进行传输,ES6声明如下: export default ModuleName 在它们中,由公共供电的节点不理解。js风格模块。

因此,我更新了我的软件包,然后使用 global 将babelify作为全局转换运行的选项,排除所有节点模块,但我感兴趣的节点模块,如BabelifyRepo页面所示:

...    
browserify.transform("babelify", 
    {
        presets: ["@babel/preset-env"], 
        sourceMaps: true, 
        global: true, 
        ignore: [/\/node_modules\/(?!your module folder\/)/]
    }).bundle()
...

希望有帮助。

出于某种原因,babelify 8.0.0在es2015或env礼物中都不适用于我。然而 as of 2018-07-10 这个 esmify 插件 mattdesl 对我有用。我的测试用例正在导出 Spinner 从…起 spin.js here ; 关键细节如下。

main.js

import {Spinner} from 'spin.js';
window.Spinner = Spinner;

在空目录中:

npm init

并接受所有默认值,则:

npm install --save spin.js
npm install --save-dev browserify esmify
npx browserify -p esmify main.js -o main-packed.js

测试HTML文件

<html><head>
    <link rel="stylesheet" href="node_modules/spin.js/spin.css" />
    <script src="main-packed.js"></script>    <!-- <== the browserify output -->
</head>
<body>
    <div id="x"></div>
    <script>
    var target = document.getElementById('x');
    var spin = new Spinner().spin(target);
    </script>
</body></html>

加载后,它将在页面中心显示微调器。

_{注意:我不属于mattdesl或esmify。}

在里面 您可能必须指定解析器选项,例如:

{
"rules": {
    "indent": [
        2,
        4
    ],
    "linebreak-style": [
        2,
        "unix"
    ],
    "semi": [
        2,
        "always"
    ]
},
"env": {
    "es6": true,
    "browser": true,
    "node": true,
    "mocha": true
},
"extends": "eslint:recommended",
"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
}

}

请查看以下文档指南: eslint .

全球地

npm install -g browserify

在您的应用程序目录中:

npm install --save-dev browserify babelify babel-preset-es2015 babel-preset-stage-0 babel-preset-react

然后创建一个吞咽任务:

    var browserify = require("browserify");
    var babelify = require("babelify");

    gulp.task('es6-compile', function() {
      browserify({ debug: true })
        .transform(babelify.configure({ presets: ["es2015","react", "stage-0"] }))
        .require("./public/src/javascripts/app.js", { entry: true })
        .bundle()
        .pipe(gulp.dest('./public/dest/javascripts'));
    });

在./public/dest/javascripts目录中,您将找到已编译的es5应用程序。js文件。

如果你想使用任何东西 import 或 require 方法,只需执行以下步骤

1. npm install browserify babelify @babel/preset-env @babel/preset-react @babel/core es2015 --save-dev 要安装所需的预设:
2. 将此代码添加到 package.json

"babel": {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ] 
}

3. 创建名为的文件 dom_front.js 内部 /app 文件夹:您要转换为clientside.js的文件。

const ReactDOM  = require('react-dom')
import React, {Component} from 'react' 
export {Component,React,ReactDOM};

这是模块和需求文件的混合导出数据。

注意:不要忘记安装react dom&反应

4. 使用browserify api-创建js文件,如browserifyload。js和资产文件夹

const browserify = require("browserify")
const fs = require('fs')
browserify("./dom_front.js", {
  debug : true,
  standalone: "util"
}).transform(['babelify', { compact: false }], {
  global: true,                                  
  ignore: [/\/node_modules\/(?!@vizuaalog\/)/],     
  presets: [ 
    "@babel/preset-env",
    "@babel/preset-react"] 
  }).bundle().on('error', function (err) {
    console.log(err);  
  }).pipe(fs.createWriteStream('assets/mynpmmodule.js')).on('end', function(){
    console.log( 'finished writing the browserify file' );
  });

5. 现在,文件夹结构是

app
--dom_front.js
--browserifyload.js
--assets(folder)

6. 跑 /node_proj/app$ node browserifyload.js 或运行 /node_proj/app$ browserify dom_front.js --transform babelify --standalone util > ./assets/mynpmmodule.js
7. 检查资产文件夹,它现在在其中创建名为 mynpmmodule.js
8. 将此文件添加到HTML中 <script src="assets/mynpmmodule.js"></script>
9. util 喜欢

<script>
  const Component = util.Component;
  console.log(Component);
  const ReactDOM = util.ReactDOM;
</script>

我尝试了上面的所有答案,但没有一个对我有效,我甚至尝试使用 吞咽包括 / 需要语法 ,它们既不是解决方案,也不足以满足我的要求。

这是我的要求。

1. 将所有模块/文件捆绑到一个
2. 保留所有评论/JSDocs
3. 保留所有类型(如 const example = (parameter: string) => {} )
4. 使用导入/导出语法

列出这些需求的原因是因为我们需要一个存储库,将我们的共享函数、共享配置、共享类型和共享常量存储为一个npm包(使用URL安装)。在这种情况下,我们已经知道我们的项目都在使用TypeScript,因此不需要将共享模块编译为 .js ,我们还需要像其他包一样保留所有描述(JSDoc和Type确实很有用)。

到目前为止,我所能做的就是使用 browserify 具有 tsify here .

browserify()
    .plugin(tsify, { target: 'es6' })
    .transform(babelify, { extensions: [ '.tsx', '.ts' ] })

我仍然在寻找保持内联类型和注释/jsdoc的方法,但我相信这足以满足您的需要。

    return browserify(jsConfig.src)
  .transform(babelify.configure({
    presets: ["@babel/preset-env"]
  }))
  .bundle()
  .on('error', function (e) {
    console.log(e.message);

    this.emit('end');
  })

此错误可能是由于在gulp任务中没有包含tsify插件来编译typescript。

实例

    var tsify = require('tsify');

    return browserify({ ... })
      .plugin(tsify)
      .transform(babelify.configure({
        presets: ["es2015"]
      }))
      ...

请参阅此处的安装和使用: https://www.npmjs.com/package/tsify

在我的情况下,我使用 出口 而不是 出口 .

改变 出口 到 出口 .