vscode运行 es6 export,import的模块时 SyntaxError: Cannot use import statement outside a module

当vscode运行es6 export,import的模块时,

出现:

SyntaxError: Cannot use import statement outside a module                                                                                                                    
    at wrapSafe (internal/modules/cjs/loader.js:1043:16)                                                                                                                     
    at Module._compile (internal/modules/cjs/loader.js:1091:27)                                                                                                              
    at loader (D:\SoftwareAndProgram\program\weixin\miniprogram\mini-mall\mini-mall-admin\node_modules\babel-register\lib\node.js:146:5)                                     
    at Object.require.extensions.<computed> [as .js] (D:\SoftwareAndProgram\program\weixin\miniprogram\mini-mall\mini-mall-admin\node_modules\babel-register\lib\node.js:156:
7)                                                                                                                                                                           
    at Module.load (internal/modules/cjs/loader.js:976:32)                                                                                                                   
    at Function.Module._load (internal/modules/cjs/loader.js:884:14)                                                                                                         
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:67:12)                                                                                      
    at D:\SoftwareAndProgram\program\weixin\miniprogram\mini-mall\mini-mall-admin\node_modules\babel-cli\lib\_babel-node.js:151:24                                           
    at Object.<anonymous> (D:\SoftwareAndProgram\program\weixin\miniprogram\mini-mall\mini-mall-admin\node_modules\babel-cli\lib\_babel-node.js:152:7)                       
    at Module._compile (internal/modules/cjs/loader.js:1121:30)        

大概意思是nodejs不支持import语法,如果要支持,需要babel来支持。

babel的安装

所以我们来安装babel吧, 有了babel, 能够使用更多高级词法!

在项目根目录下,执行:

npm install --save babel-core
npm install --save babel-preset-env 或者 npm install --save babel-preset-es2015
npm install babel-cli -g

接着在项目根目录下创建一个名字为.babelrc的文件, 文件内容入如下( 要注意window系统下创建这种文件系统会提示你:“必须键入文件名” , 你可以找别的方式去创建, 我是在开发工具的工程目录中把这个文件创建出来的,也可以用cmder神器的vim命令):

 {
    "presets": [
      "es2015"
    ],
    "plugins": []
}

{                
    "presets": [ 
         "env"   
     ],          
    "plugins": []
}                

到目前为止babel算是安装完毕了。

接下来可以用npm startbabel-node app.js运行项目。

Uncaught SyntaxError: Cannot use import statement outside a module 是一个JS错误。这个错误的原因是在非模块中使用了import语句。 为了解决这个错误,您可以将脚本的类型设置为module,页面中的script标签添加type="module"属性。例如,在index.html文件中可以这样编写脚本代码: ``` <script type="module"> import { add } from './test.js'; console.log(add(1,2)); // 打印出3 </script> ``` 同,确保导入的模块(test.js)也是一个ES6模块,需要使用export语句将需要导出的函数或变量暴露出来。例如,在test.js文件中可以这样编写代码: ``` export const add = (x, y) => { return x + y; } ``` 通过以上方法,您可以解决Uncaught SyntaxError: Cannot use import statement outside a module错误,并且成功使用import语句在模块中导入其他脚本中的函数或变量。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [报错:Uncaught SyntaxError: Cannot use import statement outside a module 详解](https://download.csdn.net/download/weixin_38517095/14038442)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Uncaught SyntaxError: Cannot use import statement outside a module](https://blog.csdn.net/Amnesiac666/article/details/129103005)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值