vue-cli3+ts+webpack实现多入口多出口功能

“vue-cli3+ts+webpack实现多入口多出口功能”需要做如下几个步骤：

初始化项目

使用vue-cli3初始化一个vue项目，这个项目作为主项目，用于引入其他模块。

vue create my-project

添加模块

在主项目中，通过npm或yarn安装其他需要接入主项目的模块，例如我们需要接入一个blog模块，通过以下命令安装：

npm install blog --save

配置webpack

在vue-cli3中，webpack配置被封装到了vue.config.js文件中。

首先需要设置webpack入口entry和出口output

module.exports = {
  pages: {
    index: {
      entry: 'src/main.ts',
      template: 'public/index.html',
      filename: 'index.html'
    },
    blog: {
      entry: 'src/modules/blog/main.ts',
      template: 'public/blog.html',
      filename: 'blog.html'
    }
  }
}

其中pages对象中的key作为html文件名，value为入口文件名。我们通过配置多个entry和出口来实现多入口多出口的项目。

需要注意的是，每个入口文件的tsconfig.json中需要添加以下配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
  }
}

编写模块代码

在src/modules/blog/目录下新建一个入口文件main.ts，可以在其中引入其他需要使用的模块，例如blog.ts：

import Blog from './blog'

new Blog()

Blog类的定义写在blog.ts中：

export default class Blog {
  constructor() {
    console.log('blog module loaded!')
  }
}

运行项目

在主项目根目录下运行 npm run serve，打开http://localhost:8080可以看到主页，打开http://localhost:8080/blog.html可以看到博客页。

示例1：

假设我们有一个user模块，这个模块也需要接入主项目中进行使用。

首先，在主项目中安装模块： npm install user --save
然后，在vue.config.js中添加入口和出口：

  pages: {
    index: 'src/main.ts',
    blog: 'src/modules/blog/main.ts',
    user: 'src/modules/user/main.ts' // 添加user入口
  },

在src/modules/user/目录下新建一个入口文件main.ts，可以在其中引入其他需要使用的模块，例如user.ts：

import User from './user'

new User()

在user.ts中编写User类代码：

export default class User {
  constructor() {
    console.log('user module loaded!')
  }
}

示例2：

假设我们需要使用typescript编写代码。

在vue.config.js中，我们需要修改webpack配置，设置esModuleInterop为true,这个选项在tsconfig.json中也需要设置。

module.exports = {
  pages: {
    index: 'src/main.ts',
    blog: 'src/modules/blog/main.ts'
  },

  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          options: { appendTsSuffixTo: [/\.vue$/] }
        }
      ]
    },

    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.json'],
    },
  },

  // 修改默认的入口文件名
  chainWebpack: config => {
    config.entry('app').clear().add('./src/main.ts')
  },

  // 这里添加vue-cli支持的全局变量
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/less/variable.less'),
      ]
    }
  },

  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}

然后需要在每个模块的tsconfig.json中添加以下配置

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "isolatedModules": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitDeclareDependencies": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "dist"]
}