ES 之 模块

标签：缓存   load   option   def   use   ini   filename   ade   OLE   

查看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))

ES 之 模块

标签：缓存   load   option   def   use   ini   filename   ade   OLE   

原文地址：https://www.cnblogs.com/HKUI/p/13119344.html