zoukankan      html  css  js  c++  java
  • 如何本地搭建一个支持es6的import from 模块导入环境

    今天想使用一下import  from语法测试个东西,结果 在node环境中运行时,报错,说不支持import语法,之前都是在vue-cli的环境中直接使用的,还以为不需要什么环境呢。。。

    import from是es6语法,需要用babel将es6语法转换成es5语法,才能在node环境中正常执行,下面来一步一步简单的搭建一个支持import  from模块导入语法的环境,

    安装node就不用说了,必须品;

    首先 初始化一下,会出现package.json文件

    npm init -y 

    安装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的文件, 文件内容入如下

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

    或者:

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

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

    下面来测试一下

    我们创建一个index.js

    import {a} from "./module1"
    
    a()

    创建一个module1.js

    export function a(){
        console.log(1111);
    }

    然后运行一下:

    babel-node index.js

     成功!!!

     简单区分一下 

    1、import from(导入)      export / export default  (导出)

    2、require(导入)      module.exports(导出)

    1是es6的模块导入语法,export 是单个导出,可以多次出现  export.default只能出现一次

    2是common.js的模块语法  module.exports导出一个对象(nodejs遵守这个模块规则)

    common.js模块导入举个例子

    module2.js

    module.exports = {
        a(){
            console.log("common.js");
        }
    } 

    index.js

    let {a} = require("./module2")
    a()

    运行一下:

    node index.js

  • 相关阅读:
    HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
    JS中关于clientWidth offsetWidth scrollWidth 等的含义
    关于javascript中dataset的问题小结
    AMD CMD ,requirejs seajs 区别
    [if IE ]>与<![endif]
    windows下实现wamp与tomcat环境整合
    webstorm 设置jsp支持
    js获取客户端IP及地理位置
    AngularJS所有版本下载地址
    jQuery插件开发全解析
  • 原文地址:https://www.cnblogs.com/fqh123/p/13285679.html
Copyright © 2011-2022 走看看