首页 > 编程语言 >NodeJS系列(2)- 在 NPM 项目里使用 ECMAScript 6 (ES6) 规范

NodeJS系列(2)- 在 NPM 项目里使用 ECMAScript 6 (ES6) 规范

时间:2023-06-17 16:56:46浏览次数:45  
标签:NPM ES6 NodeJS npmdemo nodejs js workshop export common


NPM (Node Package Manager),NodeJS 包或模块管理工具,比较新的 NodeJS 版本一般内置 NPM 。NPM 有点类似于 Maven 在 Java 开发中的作用,NPM 项目也和 Maven 项目类似,包含了创建、编译、运行、打包、部署等功能。

ECMAScript 6 (ES6) 是最新的 JavaScript 语言的标准化规范,它的目标是使 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

ES6 出现之前 Javascript 模块的加载方案,最主要的是 CommonJS 规范和 AMD 规范。CommonJS 规范应用于服务器,实现同步加载,比如 NodeJS。AMD 规范应用于浏览器,比如 requireJS (异步加载)。同时还有 CMD 规范,比如 seaJS (同步加载)。


1. 系统环境

    操作系统:Windows 10 (x64)
    NVM:1.1.11
    NodeJS: 14.21.3 LTS
    NPM:6.14.18
    工作目录:D:\workshop\nodejs

 

2. 创建 npm 项目

    进入工作目录 D:\workshop\nodejs,手动创建子目录 npmdemo,在命令行控制台进入该子目录,运行如下命令:

        D:\workshop\nodejs\npmdemo> npm init

            This utility will walk you through creating a package.json file.
            It only covers the most common items, and tries to guess sensible defaults.

            See `npm help init` for definitive documentation on these fields
            and exactly what they do.

            Use `npm install <pkg>` afterwards to install a package and
            save it as a dependency in the package.json file.

            Press ^C at any time to quit.
            package name: (npmdemo)
            version: (1.0.0)
            description:
            entry point: (index.js)
            test command:
            git repository:
            keywords:
            author:
            license: (ISC)
            About to write to D:\workshop\nodejs\npmdemo\package.json:

            {
                "name": "npmdemo",
                "version": "1.0.0",
                "description": "",
                "main": "index.js",
                "scripts": {
                    "test": "echo \"Error: no test specified\" && exit 1"
                },
                "author": "",
                "license": "ISC"
            }

            Is this OK? (yes)

        注:可以运行带 -y 参数的命令 npm init -y,即出现交互选择时都自动选 yes。init 命令运行完成后,npmdemo 目录先生成一个 package.json 文件。

    创建 D:\workshop\nodejs\npmdemo\index.js 文件,内容如下:

        console.log("NPM demo");

    修改 D:\workshop\nodejs\npmdemo\package.json 文件 ,内容如下: 

        {
            "name": "npmdemo",
            "version": "1.0.0",
            "description": "",
            "main": "index.js",
            "scripts": {
                "test": "echo \"Error: no test specified\" && exit 1",
                "start":"node index.js"
            },
            "author": "",
            "license": "ISC"
        }

    运行

        D:\workshop\nodejs\npmdemo> npm run start

            > [email protected] start D:\Workshop\dev-nodejs\npmdemo
            > node index.js

            NPM Demo         



3. ES6 模块

    ES6 的模块设计思想是静态化的,它在编译时确定模块的依赖关系以及输入和输出的变量,也就是说它在编译时就完成了模块加载,我们称为 “编译时加载” 或者静态加载,效率上比 CommonJS 要高。
    
    ES6 新增了 export 和 import 语法(或命令、关键字)来实现模块之间的功能调用(或数据复用),而且逐渐取代 CommonJS/AMD 规范的 exports 和 require 语法,现已成为浏览器和服务器通用的模块解决方案。

    示例,在 npmdemo 项目下,创建 common.js 模块使用 export 导出,在 index.js 使用 import 导入 common.js 导出的函数、对象和变量。

        创建一个 D:\workshop\nodejs\npmdemo\common.js 文件,内容如下

            function func() {
                console.log("common -> func()")
            }
            
            let obj = {
                name: "common -> obj"
            }
            
            let str = "common -> str"
            
            export {
                func,obj,str
            }


        修改 D:\workshop\nodejs\npmdemo\index.js 文件,内容如下

            import * as common from "./common.js"

            console.log("type: " + typeof(common))
            common.func()
            console.log(common.obj.name)
            console.log(common.str)

        运行

            D:\workshop\nodejs\npmdemo> node index.js

            或

            D:\workshop\nodejs\npmdemo> npm run start

                (node:22624) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
                (Use `node --trace-warnings ...` to show where the warning was created)
                D:\Workshop\nodejs\npmdemo\index.js:1
                import * as common from "./common.js"
                ^^^^^^

                SyntaxError: Cannot use import statement outside a module
                    at wrapSafe (internal/modules/cjs/loader.js:1029:16)
                    at Module._compile (internal/modules/cjs/loader.js:1078:27)
                    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
                    at Module.load (internal/modules/cjs/loader.js:979:32)
                    at Function.Module._load (internal/modules/cjs/loader.js:819:12)
                    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12)
                    at internal/main/run_main_module.js:17:47


        NodeJS 默认支持 CommonJS 模块规范,export 和 import 属于 ES6 的模块化语法,需要在 package.json 中声明 "type": "module"。修改 package.json,内容如下:

            {
                ...

                "author": "",
                "license": "ISC",
                "type": "module"
            }


        再次运行

            D:\workshop\nodejs\npmdemo> npm run start

                type: object
                common -> func()
                common -> obj
                common -> str

 


4. export

    一个模块就是一个独立的文件,该文件内部的资源,外部无法访问,export 用于放开访问限制,将 export 放在变量、函数、类或对象等的前面,允许其它模块访问。

    export 规定的是对外接口,必须与模块内部变量/函数/类等建立一一对应的关系。export 输出的接口和其对应的值都是动态绑定的关系,即通过该接口取到的都是模块内部实时的值。

    export 必须在模块顶层,可以位于模块顶层的任意位置,但是不能在其它作用域内(比如:函数作用域内)。

    1) export 变量

        // 格式1,等效于导出对象 {a}
        export var a = 1

        // 格式2
        var b = 2
        export {b}

        // 格式3
        var c = 3
        export {c as d}

        // 报错,没有模块内部变量
        export {4}

        // 报错,导出格式有错
        export 5

        // 报错,导出格式有错
        var e = 6
        export e

 

    2) export 函数

        // 格式1
        export function f() {}

        // 格式2
        function f() {}
        export {f}

        // 报错,导出格式有错
        function f() {}
        export f


    3) export default

        export default 就是输出一个 default 变量/函数/类,在 import 时可以为它取任意名字。

        示例,修改 D:\workshop\nodejs\npmdemo\common.js 文件,内容如下

            var s = 'default value'

            export default s

            export var v = 99

            var obj = {"name": "nodeJS"}

            export {obj} 


        修改 D:\workshop\nodejs\npmdemo\index.js 文件,内容如下

            import anyname from "./common.js"

            console.log("type: " + typeof(anyname))
            console.log(anyname)

        运行

            D:\workshop\nodejs\npmdemo> node index.js

                type: string
                default value

            注:import anyname 默认导入了 common.js 里 export default 导出的变量 s。


5. import

    import 用于从其它模块导入变量、函数、对象等资源。import 分为命名式导入(名称导入)和 定义式导入(默认导入)。import 必须放在文件的最开始,且前面不允许有其他逻辑代码,和 Java 、Python 类似。

    示例,以上文 export default 部分的 common.js 文件为例

        使用 import 命名式导入全部变量,修改 D:\workshop\nodejs\npmdemo\index.js 文件,内容如下

            import * as common from "./common.js"

            console.log("type: " + typeof(common))
            console.log(common.obj.name)
            console.log(common.v)
            console.log(common.default)


        运行

            D:\workshop\nodejs\npmdemo> node index.js

                type: object
                nodeJS
                99
                default value


        使用 import 命名式导入 obj 和 v,修改 D:\workshop\nodejs\npmdemo\index.js 文件,内容如下

            import {obj, v} from "./common.js"

            console.log(obj.name)
            console.log(v)


        运行

            D:\workshop\nodejs\npmdemo> node index.js

                nodeJS
                99

        使用 import 定义式导入 default,修改 D:\workshop\nodejs\npmdemo\index.js 文件,内容如下

            import anyname from "./common.js"

            console.log("type: " + typeof(anyname))
            console.log(anyname)


        运行

            D:\workshop\nodejs\npmdemo> node index.js

                type: string
                default value


标签:NPM,ES6,NodeJS,npmdemo,nodejs,js,workshop,export,common
From: https://www.cnblogs.com/tkuang/p/17487680.html

相关文章

  • centos8使用Yum安装nodejs步骤方法、nodejs升级切换版本的方法
    先确认系统是否已经安装了epel-release包(EPEL是企业版Linux的额外软件包,是Fedora小组维护的一个软件仓库项目,为RHEL/CentOS提供他们默认不提供的软件包。):Bash#yuminfoepel-release如果有输出有关epel-release的已安装信息,则说明已经安装,如果提示没有安装或可安装,则安装......
  • ES6解构知多少
    最近关于解构踩过两次坑,分别在react和vue当你发现更改对象无效时,就要思考是不是解构浅拷贝出了问题理解还未完全透彻,先记录下,作为备份 1、解构赋值是浅拷贝(因为它确实不能对多维数组或对象达到深拷贝的作用)深拷贝:修改新变量的值不会影响原有变量的值。默认情况下基本数......
  • npm的升级与降级(指定版本)
    降级举例:降级到6npminstallnpm@6-g(@后跟版本号,若跟的是大版本,则更新到对应大版本最新的小版本)[email protected](更新到指定版本)升级npminstallnpm-g(更新到最新版本)......
  • 解决ValueError: Please install nodejs >=12.0.0 before continuing
     1、升级你的condacondaupdateconda 2、https://anaconda.org/conda-forge/nodejs  Toinstallthispackagerunoneofthefollowing运行  condainstall-c"conda-forge/label/cf202003"nodejs 先运行这个不行的话,再选其他的运行。 例如:condainstall-......
  • cmd输入任何npm命令空白无反应
    输入node命令没有问题,输入npm命令就空白原因:使用了其他命令(例如:npmconfigsetprefix)使npm的config乱掉了,删掉.npmrc文件就可以了这里要注意,不是nodejs安装目录npm模块下的那个npmrc文件而是在C:\Users\用户\下的.npmrc文件......
  • NodeJS系列(1)- 安装配置 NVM + NodeJS
    NodeJS(或Node.js) 是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。简而言之,NodeJS就是运行在服务端的JavaScript。NVM(NodeVersionManage),即NodeJS的版本管理工具。不同项目依赖不同的NodeJS版本......
  • vue封装公共组件库并发布到npm库
    利用的原理:vue框架提供的api:Vue.use(plugin),我们把封装好组件的项目打包成vue库,并提供install方法,然后发布到npm中。Vue.use(plugin)的时候会自动执行插件中的install方法。 一、组件库代码目录调整1.根目录创建packages文件夹2.在packages文件夹中新增components文......
  • Linux安装nodejs
    cd/opt/softwgethttps://cdn.npmmirror.com/binaries/node/v16.15.1/node-v16.15.1-linux-x64.tar.xztar-xvfnode-v16.15.1-linux-x64.tar.xzmvnode-v16.15.1-linux-x64nodejs-v16.15#建立软连接ln-s/opt/soft/nodejs-v16.15/bin/node/usr/bin/nodeln-s/o......
  • npm publish 发包报错npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/
    如果出现在发布的时候报这个错,说明你在package.json中登记的name已近被采用了。重名了,所以你得换一个。我们在发布一个包之前,最好拿着这个登记的name去搜一下,如果已近有了,那就要换一个。......
  • 前端npm下载node_modules依赖的时候报错
    使用npminstall--legacy-peer-deps,报如下图:解决办法:修改hosts文件找到如下文件夹:C:\Windows\System32\drivers\etc下的hosts文件使用工具把hosts文件打开185.199.108.133raw.githubusercontent.com185.199.109.133raw.githubusercontent.com185.199.110.133raw.githu......