详解ES6模块化

详解ES6模块化

​​参考博文​​

第一步：初始化项目，使得能被npm管理

npm init -y

第二步：配置.babelrc

Babel提供babel-cli工具,用于命令行转码。它的安装命令如下：

npm install --global babel-cli// 查看是否安装成功babel --version

安装转码器

npm install --save-dev babel-preset-es2015

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

第三步：定义运行脚本

package.json增加"build-m"

作用是将modularization/src目录下编译输出到modularization/dist目录下

{ "script": { "build": "babel modularization/src -d modularization/dist" }}

下面贴上全部源码

方式一

userApi.js

export function getList(){ console.log('显示用户列表')}export function save(){ console.log('保存用户数据')}

userComponent.js

import {getList} from "./userApi.js"getList()

方式二

userApi2.js

export default{ getList(){ console.log('显示用户列表') }, save() { console.log('保存用户数据') }}

userComponent2.js

import user from "./userApi2.js"user.getList()user.save()

.babelrc

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

package.json

{ "name": "es6-module-demo2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "babel modularization/src -d modularization/dist" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-preset-es2015": "^6.24.1" }}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。