ES 之 模块
查看webpack 版本
1.npm info webpack 2.webpack -v 如果没有出现,npm install --global webpack-cli,因为 注意:webpack 4x以上,webpack将命令相关的内容都放到了webpack-cli,所以还需要安装webpack-cli 之后再webpack -v
npm init 生成package.json文件 npm install lodash --save 会把模块写入到依赖 "dependencies": { "lodash": "^4.17.15" } npm install moment --save
模块清理
rm -rf node_modules rm -rf package-lock.json npm cache clear --force npm install
webpack
安装在开发依赖里 npm install webpack --save-dev
babel
npm install --save-dev babel-loader @babel/core @babel/preset-env
在项目目录下新建 webpack.config.js
const TerserPlugin = require(‘terser-webpack-plugin‘); module.exports={ devtool:‘source-map‘, entry:‘./app.js‘, output:{ filename:‘./bundle.js‘ }, optimization: { minimizer: [ new TerserPlugin({ cache: true, // 开启缓存 parallel: true, // 支持多进程 sourceMap: true, }), ] }, module:{ rules:[ { test:/\.js$/, use:[ { loader:‘babel-loader‘, options:{presets:[‘@babel/preset-env‘]} }, ] } ] }, mode:‘development‘ }
修改package.json
"dependencies": { "lodash": "^4.17.15", "moment": "^2.24.0" }, "devDependencies": { "@babel/core": "^7.8.4", "@babel/preset-env": "^7.8.4", "babel-loader": "^8.0.6", "webpack": "^4.41.6", "webpack-cli": "^3.3.11" }
入口文件app.js
import { uniq } from ‘lodash‘; import moment from ‘moment‘; const arr=[1,2,2,3,3,4,5]; console.log(arr,uniq(arr))
新建一个自己的模块
默认导出和命名导出
- 默认导出一个模块只能有1个,导入时可选定任意名
- 命名导出 则名称固定
1.默认导出
config.js
const apiKey=‘123‘; export default apiKey
入口文件app.js
import apiKey from ‘./config‘; console.log(apiKey) //或者------------------ import code from ‘./config‘; console.log(code)
2.命名导出
export {apiKey as key,greet} //导出多个 import {key as mykey,greet } from ‘./config‘ import 默认的,{命名1,命名2} from ‘相对路径‘
config.js(模块文件)
const apiKey=‘123‘; export default apiKey export const age = 20; function intro(name){ return `${name}`; } export function greet(name) { console.log(`hello ${intro(name)}`) }
app.js(入口文件)
import { uniq } from ‘lodash‘; import apiKey,{age,greet} from ‘./config‘; console.log(apiKey,age) greet(‘hk‘); const arr=[1,2,2,3,3,4,5]; console.log(uniq(arr))
相关推荐
不知道该写啥QAQ 2020-11-12
webfullStack 2020-11-09
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gloria0 2020-10-26
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
gloria0 2020-08-09
不知道该写啥QAQ 2020-08-02
hline 2020-07-29
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
不知道该写啥QAQ 2020-07-18
waterv 2020-07-18
81463166 2020-07-17