精华内容
下载资源
问答
  •   因为一些历史原因,虽然 Node.js 已经实现了 99% 的 ES6 新特性,不过...  下面我来介绍两种方法可以让我们 Node.js 中使用 import/export 。 借助 Babel 1.下载必须的包 npm install babel-register...

    因为一些历史原因,虽然 Node.js 已经实现了 99% 的 ES6 新特性,不过截止 2018.8.10How To Enable ES6 Imports in Node.JS 仍然是老大难问题

    下面我来介绍三种方法可以让我们在 Node.js 中使用 import/export

    :第1、2种方法均是借助 babel,需要注意的是文章使用的babel版本 < 7。从 babel 7.X 版本开始,部分包名、用法发生了些许变化,大体与7之前的用法类似,详细请到官方手册学习 7.X 版本的改动(Babel 踩坑总结(三) —— 7.X 版本升级是我对 7.X 版本三大改动的总结)

    1. 使用 babel-register

    1.1 下载必须的包
    npm install babel-register babel-preset-env -D
    
    1.2 修改你的 server.js

    下面是一个 server.js 的例子:

    const Koa = require('koa')
    const app = new Koa()
    
    app.listen(8225, console.log("application is start at port 8225"))
    

    import 替换 require

    import Koa from 'koa'
    const app = new Koa()
    
    app.listen(8225, console.log("application is start at port 8225"))
    

    如果你现在用 node server.js 跑这个文件,你会收到像这样的错误提示:

    /Users/zwkkkk1/myStudy/demo/chatroom/server/app.js:1
    (function (exports, require, module, __filename, __dirname) { import Koa from 'koa'
                                                                         ^^^
    
    SyntaxError: Unexpected identifier
    

    下面让我们用 babel 来解决这个问题

    1.3 新增一个 start.js 文件

    这个文件将成为我们的入口文件,里面是一些 babel 的代码

    require('babel-register') ({
        presets: [ 'env' ]
    })
    
    module.exports = require('./server.js')
    

    注意,接下来不是 node server.js,而是用 node start.js 来启动这个文件

    2. 使用 babel-node 命令

    如果你不想添加新的文件也可以,这里需要在命令行中使用 babel-node 命令。babel-node 命令不是独立安装,在 Babel 7.X 版本前,需要通过安装 babel-cli 包获得;在 Babel 7.X 版本,需要安装 @babel/core@babel/cli 两个包。

    此处以 7.X 之前的版本举例,7.X 版本可去官网查找对应包的使用用例

    安装必要的插件

    全局安装 babel-cli

    npm install babel-cli -g
    

    安装 babel-preset-env

    npm install babel-preset-env -D
    

    然后原来是 node server.js,改为这样调用:babel-node --presets env server.js

    需要注意的是如果只是为了 babel-node 这一个命令,安装 babel-cli 会加载安装很多资源和模块,出于性能考虑不推荐在生产环境使用。自己在开发调试的时候,可以鼓捣着玩玩

    3. 来自 Node.js 官方的力量

    Node 9提供了一个尚处于 Experimental 阶段的模块,让我们可以抛弃 babel 等一类工具的束缚,直接在 Node 环境下使用 import/export

    官方手册:ECMAScript Modules
    一个不错的教程:Node 9下import/export的丝般顺滑使用
    有兴趣的可以去了解一下,嫌字多的可以继续往下看看我总结的使用方法

    用前须知
    • Node 版本需在 9.0 及以上
    • 不加 loader 时候,使用 import/export 的文件后缀名必须为 .mjs

    举个例子,还是用上面的例子,请将代码回退到 Babel 中第一步的样子

    3.1 改写 server.js
    import Koa from 'koa'
    const app = new Koa()
    
    app.listen(8225, console.log("application is start at port 8225"))
    

    和前面一样,不过将文件名改一下,从 server.js 改为 server.mjs

    3.2 启动文件

    执行下面代码,来启动文件

    node --experimental-modules ./server.mjs
    

    注意这是引用 koa 第三方模块不用做其他变化,如果要 import 自己的文件,那么那个待引入的文件也要改后缀。

    比如

    import example from './example'
    

    那么原来应该是 example.js 要改为 example.mjs

    目前这个模块还处于实验阶段,还是不要放到生产环境,自己拿出来玩玩还是可以的,

    展开全文
  • node中使用import 下面的文章中,您将学习如何以最低配置Node项目中设置Babel。 Cesar Carlevarino Aragon的 “手持工具批次”, Unsplash 我并不总是喜欢尝试设置Nodejs应用程序的不同版本。 不要误会我...

    node中使用import

    在下面的文章中,您将学习如何以最低配置在Node项目中设置Babel。

    Cesar Carlevarino Aragon的 “手持工具批次”, Unsplash

    我并不总是喜欢尝试设置Nodejs应用程序的不同版本。 不要误会我的意思。 我确实相信尝试一个人的设置,因为它确实会带来新的学习,但是这样做是有局限性的。 最近,我发现自己更经常会设置Nodejs服务器来开发RESTful API。 此外,服务器必须以一种客户端可以轻松使用API​​的方式与客户端一起工作。 对于客户端开发,我正在使用ReactJS。

    在客户端和服务器之间进行上下文切换时,我经常发现自己在此过程中犯了人为错误。 最常见的方法之一是在Nodejs文件中使用import语句。 这导致语法错误,称为Unexpected identifier 即使在我的本地计算机上切换到Nodejs v10 LTS之后,我仍然发现缺少使用ES6模块的令人失望的事情。

    为了克服这个问题并减少开发过程中引起的错误数量,我阅读了一些教程,但决定对自己的设置进行网格划分。 这些教程虽然写得很棒,但大多数都使用一种几乎完全相反的方法。 在日常工作中使用全栈应用程序时,我希望保持一致性。

    因此,我将向您展示在Node.js服务器端应用程序中使用import语句的精简,省时的版本。 要继续阅读本文,请确保在本地计算机上安装了以下软件:

    模拟项目入门

    我称其为模拟是因为我将从头开始构建此设置。 在本教程的最后,我将留下指向Github存储库的链接,该存储库可用作许多Node.js和Express项目的入门工具包。 您可以完全跳到链接部分和DIY。 这里没有复杂性。 如果您仍然好奇,请继续阅读这篇简短的文章。

    首先,创建一个新目录,遍历该目录,并使用npm对其进行初始化。

    将项目初始化为npm项目后,可以签出package.json文件。 它将填充您用于配置npm的详细信息。

    接下来,从终端使用以下命令创建一个新文件。

    这就是我们设置最低项目目录所需的全部。 在下一节中,我们将介绍必须安装哪些依赖项以及为什么需要这些依赖项。

    创建节点服务器

    要创建服务器,我将使用Express。 要将Express作为依赖项包含在我们的项目中,请从终端运行以下命令。

    接下来,使用以下代码附加index.js文件。

    您可以通过运行命令node index.js来运行服务器。 访问URL http://localhost:3000/ ,您将在浏览器窗口中看到一条消息: Hello from Nodejs!

    这表明服务器的代码是正确的。 现在将index.js的第一行修改为:

    运行相同的命令node index.js并停留在终端窗口中。 这次服务器没有启动,因为进程中有错误。 这是我在本文开头告诉您的错误。 默认情况下,Nodejs无法执行import语句。

    使用Babel

    我们需要的只是一个编译器,使我们可以使用ES6功能(例如Nodejs项目中的import语句)编写JavaScript。 什么是转译器?

    编译器也称为源到源编译器,它们从以一种编程语言编写的源中读取代码,并以另一种语言生成等效的代码。

    在我们的情况下,我们不会切换编程语言,而是需要使用LTS版本的Node尚不支持的新语言功能。 我将通过以下配置过程来设置Babel编译器并在我们的项目中启用它。

    首先,您将需要安装一些依赖项,并注意-D标志,因为我们开发环境只需要这些依赖项。

    安装它们后,将.babelrc文件添加到项目的根目录并添加以下配置:

    配置过程的最后一步是在package.json添加一个dev脚本。 您可以根据自己的喜好为该脚本命名。 进行更改后,这将负责自动运行babel编译器(自动)。 这是由babel-watch完成的,还负责重新启动Nodejs Web服务器。

    要查看它的动作,请确保index.js的以下代码使用如下所示的import语句。

    从终端写nr dev 如果没有错误,您将获得以下信息:

    其中nrnpm run简写。 您也可以在浏览器窗口中访问http://localhost3000/ ,以验证结果并查看服务器是否正在运行。

    结论

    本文向您展示了如何从头开始创建最低限度的最小Node服务器,以及如何使用Babel在Node.js环境中引入即将推出JavaScript功能。 我敢肯定,现在您不会像在Nodejs中一样同样的傻人为错误,并像我一样插入您选择的前端框架/库 😁

    Github存储库中提供了本文的完整代码👇

    翻译自: https://hackernoon.com/how-to-use-import-statements-in-nodejs-94c85e23aeb7

    node中使用import

    展开全文
  • 文章目录前言一、import-http 是什么二、使用方法1.下载插件2.配置你的webpack.config.js3.编写并打包你的测试文件4.运行你的文件三、价值意义总结 前言 水写了第一篇文章之后,觉得每天都可以学一些东西,做个简单...

    在这里插入图片描述

    妇女节快乐!谢谢妳们!


    前言

    写了第一篇文章之后,觉得每天都可以学一些东西,做个简单的分享,也可以是挖个坑,挖个方向,以后可以从这个方向入手,学习更多。
    希望能够坚持吧:D

    为啥是import-http,早上起来刷知乎看到的~


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、import-http 是什么

    好了正文开始,import-http 是Deno的一个特性,也就是Linking to third party code
    直观一些,
    普通Node.js代码中引用第三方库时,
    要先:

    npm install xxx
    # or
    yarn add xxx
    

    然后才可以:

    const test = require('xxx');
    // or
    import test from 'xxx';
    

    但是在deno里,你可以直接这样

    import React from 'https://unpkg.com/react';
    // 然后你就可以开始愉快地使用React了
    

    可是本文说的是node.js,这个特性
    Node.js将要支持(也就是现在没有)
    那我们要用的话怎么办?

    二、使用方法

    Node.js不自带的时候,只能依赖轮子了,现有的方案是作为一个插件,用webpack或者rollup打包
    本文介绍下在webpack下怎么用
    当然你也可以去插件的仓库看看怎么用:D
    *注意:本文的webpack版本为^4.29.0

    1.下载插件

    代码如下(示例):

    yarn add import-http --dev
    # or
    npm install import-http --save-dev
    

    2.配置你的webpack.config.js

    当然你可能不只是用这个文件名,甚至你可能不用webpack,我想别的地方引用插件流程差不了多少

    ...
    const ImportHttpPlugin = require('import-http/webpack');
    
    module.exports = {
    	... // webpack的其他内容
    	plugins:[
    		... // 其他插件
    	    new ImportHttpPlugin(),
    	]
    };
    

    这样就可以了

    3.编写并打包你的测试文件

    这也是我的入口文件index.js

    import Vue from 'https://unpkg.com/vue';
    
    console.log(Vue); // 简简单单输出个Vue
    
    index.js

    接下来就是打包

    yarn webpack --config webpack.config.js
    

    于是就会打包出来一个文件(假设打包到dist文件目录下的main.js)

    4.运行你的文件

    node main.js
    

    你就能看到输出了~
    类似下图:
    在这里插入图片描述

    输出的截图~

    上述的实验代码可以从该仓库得到,这也是笔者的仓库。


    三、价值意义

    这也是我疑惑的点,经发掘&思考有如下特点:

    • 有些库/内容可以直接从cdn拿,不用从你服务器上面下载,页面的加载速度会有所提升
    • 你本地的node_modules就不会那么大了——node_modules太大会引起别的问题,但笔者还没有踩过这个坑,如果以后踩到了会给大家展示下~

    总结

    以上就是今天要分享的内容,本文仅仅简单介绍了import-http的概念和当前的使用解决方案,希望大家可以从此受到启发,也希望从此受益的读者跟我分享下具体解决了什么问题。

    展开全文
  • 本篇文章主要介绍了import与exportnode.js中使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 这是common.js中的方法 然后我index.vue中引用它 然后子组件中使用,希望能将得到的fileName显示链接中间 结果发现报错,getFileDetails is not defined 尝试methods中重写一个方法,方法...

    这是common.js中的方法

    然后我在index.vue中引用它

     

     然后在子组件中使用,希望能将得到的fileName显示在链接中间

     结果发现报错,getFileDetails is not defined

     尝试在methods中重写一个方法,在方法中使用它,再在HTML中调用方法,发现是可以的

     

    百度一番之后发现了这位老哥的解释: 原链接

    也就是只需要在methods里面再声明一下这个方法就行

    特此记录一下

    展开全文
  • JavaScript class中无法使用外部import的函数 ​ api.js下声明了 ...​ 然后entity.js中声明 //下面写法是错误的 import { getUserInfo } from "./api" class User { constructor() {} id n
  • js中import和require的区别

    万次阅读 2019-05-16 16:13:53
    js中import和require的区别 ES6标准发布后,module成为标准,标准使用是以export指令导出接口,以import引入模块。但是我们一贯的node模块中,我们依然采用的是CommonJS规范,使用require引入模块,使用module....
  • js中require和import区别

    2020-11-18 11:51:41
    在js中一般用require const { CFather } = require("./children/CFather"); let person = new CFather(); person.draw(); 参考:https://www.cnblogs.com/hwldyz/p/9145959.html 这两个都是为了JS模块化编程...
  • vue-cli因版本过高文件目录会与以往的不同,导致main.js中import $ from 'jquery’出错。 使用bootstrap: Bootstrap需要依赖jQuery,所以引用Bootstrap之前要先引用jQuery,使用下面的命令引用jQuery: npm ...
  • 最近在使用threejs实现一个简单的3D地球,官方案例基本符合需求 software geometry earth react项目复现的时候发现一些问题,THREE.SoftwareRenderer这个渲染器并不直接THREE对象,他是通过直接加载...
  • 在研究react和webpack的时候,经常看到在js文件出现require,还有import,这两个都是为了JS模块化编程使用。CSS的是**@import** 1.ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及...
  • 如下 定义了一个外部js文件...import lunaCommon from '../lunaCommon.js'; var ctx = wx.getStorageSync("ctx"); var filter = "/ms-code"; var apis = { //根据sc获取发货单 "findDispatchBill": func...
  • 公共js中使用axios

    千次阅读 2019-09-19 17:56:25
    public.js中 import axios from 'axios'; const web_url = 'http://www.zhangsan.com'; export function getDept() { let arr = []; axios.get(web_url + '/comboboxDept2', { params: { p...
  • JS关键字 import

    2018-08-21 17:24:00
    今天开发时使用import作为方法名,报错 后查明报错原因:import是js中的关键字,取方法名时不能取import 转载于:https://www.cnblogs.com/wangzh1guo/p/9512677.html...
  • 项目结构 在js文件创建对外开放的方法 在index.vue引入validate.js并且使用
  • 引入css &lt;template&gt;&lt;/template&gt; &lt;style scoped&...@import "...引入js ...1,需要的页面引入, ...import '../../../static/js/jquery-1.9.1.min.js' //jq插件 ...
  • 在研究react和webpack的时候,经常看到在js文件出现require,还有import,这两个都是为了JS模块化编程使用。CSS的是@import 1.ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入...
  • methods中在定义一次

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,223
精华内容 4,089
关键字:

在js中使用import