发表新帖
发表新帖

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' - Gulp

后端 未结
关注
10 793
天命终不由人
天命终不由人 2020-11-27 20:10

Consider the following two files:

app.js

import Game       from \'./game/game\';
import React      from \'react\';
import ReactDOM   fro
相关标签:
10条回答
  • 生来不讨喜
    2020-11-27 20:22

    I came across the same error trying to import a module from node_modules that exports in ES6 style. Nothing that has been suggested on SO worked out for me. Then I found FAQ section on babelify repo. According to the insight from there, the error appears since modules from node_modules are not transpiled by default and ES6 declarations like export default ModuleName in them are not understood by node powered by Common.js-style modules.

    So, I updated my packages and then used global option to run babelify as a global transform excluding all node modules but the one I was interested in as indicated on the babelify repo page:

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

    Hope it helps.

    0 讨论(0)
  • 灰色年华
    2020-11-27 20:26

    For some reason, babelify 8.0.0 didn't work for me with either the es2015 or env presents. However, as of 2018-07-10, the esmify plugin by mattdesl did work for me. My test case was exporting Spinner from spin.js as a window global. My example repo is here; key details follow.

    main.js

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

    Test

    In an empty directory:

    npm init

    and accept all defaults, then:

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

    Test HTML file

    <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>

    When loaded, it displays a spinner in the center of the page.

    Note: I am not affiliated with mattdesl or esmify.

    0 讨论(0)
  • 面向向阳花
    2020-11-27 20:30

    Older versions of Babel came with everything out of the box. The newer version requires you install whichever plugins your setup needs. First, you'll need to install the ES2015 preset.

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

    Next, you need to tell babelify to use the preset you installed.

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

    Source

    0 讨论(0)
  • 长情又很酷
    2020-11-27 20:34

    ESLint natively doesnt support this because this is against the spec. But if you use babel-eslint parser then inside your eslint config file you can do this:

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

    Doc ref: https://github.com/babel/babel-eslint#configuration

    Answer referred from here : ignore eslint error: 'import' and 'export' may only appear at the top level

    0 讨论(0)
  • 太阳男子
    2020-11-27 20:35

    For correct compiling es2015-react code you should install some node modules:

    globally

    npm install -g browserify

    in your app directory:

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

    Then create gulp task:

        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'));
    });

    In ./public/dest/javascripts directory you will find compiled es5 app.js file.

    0 讨论(0)
  • 终归单人心
    2020-11-27 20:37

    If you want to use anything by import or require method in npm to clientside just do the following steps

    1. Run npm install browserify babelify @babel/preset-env @babel/preset-react @babel/core es2015 --save-dev to install the required presets
    2. Add this code into your package.json
    "babel": {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ] 
}
    1. Create a file named as dom_front.js inside of /app folder the file which you want to convert as clientside js.
    const ReactDOM  = require('react-dom')
import React, {Component} from 'react' 
export {Component,React,ReactDOM};

    This is the mixed export data of modules and require files.

    Note: dont forget to install react-dom & react

    1. Using browserify api - create js file such as browserifyload.js and assets folder
    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' );
  });
    1. Now the folder structure is
    app
--dom_front.js
--browserifyload.js
--assets(folder)
    1. Run /node_proj/app$ node browserifyload.js or run /node_proj/app$ browserify dom_front.js --transform babelify --standalone util > ./assets/mynpmmodule.js
    2. Check the assets folder, where it now creates the file named as mynpmmodule.js
    3. Add this file into your HTML <script src="assets/mynpmmodule.js"></script>
    4. Now you can use the exported npm modules/classes or required files using the standalone key mentioned above util like
    <script>
  const Component = util.Component;
  console.log(Component);
  const ReactDOM = util.ReactDOM;
</script>
    0 讨论(0)
 看不清?
提交回复
热议问题