ES6模块化输出和运行

最新推荐文章于 2023-02-06 22:50:02 发布

Sweet_HaoChen

最新推荐文章于 2023-02-06 22:50:02 发布

阅读量414

点赞数 1

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/qq_38311097/article/details/83005832

版权

Vue学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

首先先定义一个util1.js函数：

export default {
    a: 100
}

再定义util2.js函数：

export function fn1() {
    alert('fn1')
}
export function fn2() {
    alert('fn2')
}

在index.js中import刚刚暴露的几个值：

import util1 from './util1.js'
import { fn1, fn2 } from './util2.js'

console.log(util1)
fn1()
fn2()

这时候如果直接在命令行中输入node main.js，是无法运行的，会报错为import没有定义，无法解析。所以这个时候首先需要Babel进行编译的过程。所谓编译的过程，是由于ES6中的新语法在浏览器中无法运行，要将新语法转换成可以识别的旧语法。

开发环境 ——babel

首先运行npm init

然后运行npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest --registry=https://registry.npm.taobao.org

安装需要的相关模块，成功之后在工程文件的根目录下创建一个.babelrc的文件，并写入：

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

之后全局安装babel-cli：npm install -g babel-cli

可以通过babel --version来测试是否安装成功。通过babel src/index.js可以编译出能够让浏览器识别的语法。

开发环境——webpack

babel只能实现语法之间的转化，但是对于诸如import这样相互引用和多层次引用则不能。而webpack可以。

首先先

npm install --save-dev webpack babel-loader --registry=https://registry.npm.taobao.org

，然后新建一个webpack.config.js文件，并在文件中加入：

module.exports = {
    entry:'./src/index.js',
    output:{
        path:__dirname,
        filename: './build/bundle.js'
    },
    module:{
        rules:[{
            test:/\.js?$/,
            exclude:/(node_modules)/,
            loader:'babel-loader'
        }]
    }
}

打开packet.json文件，并在文件中script里面加入"start": "webpack"

输入npm start运行。

新建一个index.html文件，然后在script标签中引入bundle.js，输入命令http-server -p 8089，进入http://192.168.1.101:8089/，即可看见效果。

npm uninstall babel-loader

npm install babel-loader@7.1.5