node环境打包js，webpack和rollup两个打包工具打包，能支持vue

引言

项目中经常用到共用的js，这里就需要用到共用js打包，这篇文章讲解两种打包方式，webpack打包和rollup打包两种方式

1、webpack打包js

1.1 在根目录创建 webpack.config.js，配置如下

bash 复制代码

const path = require('path');
module.exports = {
 entry: './index.js', 
 output:{
  filename:'index.js',
  path:path.resolve(__dirname,'dist'),
  library: 'myModule',
  libraryTarget:'umd'
 },
 // 以下代码为新添加代码
 module:{
  rules:[
   {
    test: /\.js$/, // 匹配所有 js 文件
    loader: 'babel-loader' // 使用 babel-loader 处理 js 文件
   },
  ]
 },
};

1.2 安装依赖包 package.json

npm install @babel/core @babel/preset-env babel-loader @babel/plugin-transform-runtime 这里用来将es6转成es5

npm install webpack webpack-cli

bash 复制代码

{
  "main": "index.js",
  "scripts": {
    "buildwebpack": "webpack"
  },
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "babel-loader": "^9.1.3",
    "webpack": "^5.90.0",
    "webpack-cli": "^5.1.4"
  },
  "dependencies": {
    "@babel/plugin-transform-runtime": "^7.23.9"
  }
}

1.3 配置 babel.config.js

bash 复制代码

const presets = [
    [
        "@babel/env",
        {
            targets: {
                ie: "6",
                edge: "17",
                firefox: "60",
                chrome: "67",
                safari: "11.1"
            },
            //useBuiltIns: "usage",
            //corejs: "3", // <---  此处加个这个，就没有报错警告了

        },
    ],
];

module.exports = { presets,
    "plugins": ["@babel/transform-runtime"]
};

1.4 webpack 支持vue

"vue-loader": "^15.11.1",

"vue-template-compiler": "^2.6.12" //需要和vue版本一致

npm install vue-loader@15 vue-template-compiler@2 vue@2 css-loader

bash 复制代码

const path = require('path');
const {VueLoaderPlugin} = require('vue-loader')
module.exports = {
 entry: './index.js', 
 output:{
  filename:'index.js',
  path:path.resolve(__dirname,'dist'),
  library: 'myModule',
  libraryTarget:'umd'
 },
 // 以下代码为新添加代码
 module:{
  rules:[
   {
    test: /\.js$/, // 匹配所有 js 文件
    loader: 'babel-loader' // 使用 babel-loader 处理 js 文件
   },
   {
    test: /\.vue$/, 
    loader: 'vue-loader'
   },
//    { test: /\.css$/, 
//      use: ['style-loader','css-loader' ]
//    },
  ]
 },
 //需要注意的点：vue-loader 15版本需加入插件
 plugins: [
    new VueLoaderPlugin()
  ]
};

2、rollup 打包js

2.1 在根目录创建 rollup.config.js，配置如下

bash 复制代码

import babel from 'rollup-plugin-babel';
export default {
    input: 'index.js',
    output: {
        file: 'lib/index.js',
        format: 'cjs',
    },
    plugins: [ babel({
        runtimeHelpers: true, 
        presets: ["@babel/preset-env"],
    }) ],
};

2.2 安装依赖包 package.json

npm install @babel/core @babel/preset-env 这里用来将es6转成es5

npm install rollup rollup-plugin-babel

bash 复制代码

{
  "main": "index.js",
  "scripts": {
    "buildrollup": "rollup -c",
  },
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "babel-loader": "^9.1.3"
  },
  "dependencies": {
    "@babel/plugin-transform-runtime": "^7.23.9",
    "rollup": "^2.79.1",
    "rollup-plugin-babel": "^4.4.0"
  }
}

2.4 rollup 打包vue

rollup-plugin-vue^5.1.9 + vue-template-compiler

rollup-plugin-postcss 识别css和预处理文件

npm install rollup-plugin-vue@5 vue-template-compiler rollup-plugin-postcss

bash 复制代码

export default {
    input: 'index.js',
    output: {
        file: 'lib/index.js',
        format: 'cjs',
    },
    plugins: [ babel({
        runtimeHelpers: true, 
        presets: ["@babel/preset-env"],
    }),
    vue2({
        css:true,
        compilerTemplate: true,
        preprocessStyles: true
    }) ],
};