This blog post is about building a multi-project project based on VUe-CLI (Webpack version 3X), allowing multiple projects to use the same component. Implement a project to run the development environment and packaging environment for a specific project

If you don't understand Webpack as much as I do, come on in

Recommend the article

Do not understand webpack recommended to see this shallow into shallow out webpack(very short, not much content, but you can have a basic understanding), read and then continue to see the following.

directory

The reconstructed structure of the project is as follows

.babelrc node_modules package.json ... Components Project 1 (VUE Admin) Dist SRC Components Page Router main.js... Static index.html Project 2(React PC) Dist SRC Components Page Router main.txs... static index.html tsconfig.jsonCopy the code

The entrance

Package. json Since we are using multiple projects, packaging and development will be different. The command will definitely add a project specification, modify package.json, find scripts

Change dev and build to the following format (admin is the project name, according to your business)

"admin-dev": "node build/dev-server.js admin"."admin-build": "node build/build.js admin".Copy the code

Development Environment Settings

Nodebuild /dev-server.js admin = nodebuild /dev-server.js admin = nodebuild /dev-server.js admin

Argv = process.argv = process.argv = process.argv = process.argv = process.argv = process.argv = process.argv = process.argv = process.argv = process.argv = process.argv = process.argv = process.argv = process.argv = process.argv = process.argv = process.argv

config/index.js

var projects_root_dir = process.argv[2]
Copy the code

Modify the build

index: path.resolve(__dirname, `.. /${projects_root_dir}/dist/index.html`), assetsRoot: path.resolve(__dirname, `.. /${projects_root_dir}/dist`),
Copy the code

Modify the dev

assetsPublicPath: '/'.Copy the code

dev-server.js

Then open dev-server.js and see how it works

// ...
// The code above is omitted, just look at this part of the core and the code to be changed
// ...
// This is what the page outputs to the development environment
var devMiddleware = require("webpack-dev-middleware")(compiler, {
    // Delete this
    // publicPath: webpackConfig.output.publicPath,
    // Change to this
    publicPath: '/'.quiet: true,})// This is a proxy for static files using the Express framework
app.use(staticPath, express.static(`. /${config.projects_root_dir}/static`));
Copy the code

To learn more, click on the Webpack-dev-Middleware portal

webpack.base.conf.js

Modify the entry

Config.projects_root_dir: {app: './${config.projects_root_dir}/src/main.js`
},
Copy the code

Modify resolve function

// This function is inaliasThat's what you're going to use, that's what you're going to add to import. // Delete this //returnPath. join(__dirname, dir) // replace with var resolve_path = path.join(__dirname, dir)".. /" + config.projects_root_dir,
        dir
);
Copy the code

Modify the rules

/ / intest: / \. Vue $/, here to add a / / include: [path. Join (__dirname,'.. / ')} //test: /\.vue$/,
        loader: "vue-loader",
        options: vueLoaderConfig,
        include: [path.join(__dirname, '.. / '} // Do not include resolve()"src"), because of public projects, other places also need to compileCopy the code

build/utils.js

Resolve (‘.. resolve ‘, ‘path.resolve’); /’ + config.projects_root_dir looks like this

 resources: [path.resolve(__dirname, '.. / ' + config.projects_root_dir, config.less_resources)]
Copy the code

At this point, the development environment is set up. NPM run admin-dev is ready to run. (if there are no accidents).

The effect

Perfect operation

Packaging environment Settings

webpack.prod.conf.js

HtmlWebpackPlugin modifies the following code

Template: '${config.projects_root_dir}/index.html`,
Copy the code

CopyWebpackPlugin is modified as follows

Resolve (__dirname, '.. ') from: path.resolve(__dirname, '.. /${config.projects_root_dir}/static`),
Copy the code

Then use the nginx agent to test it locally.

Configure aliases that reference components outside the project

/ /.. Before and after the code does not show hafunction private_resolve() {
    var privete_page_resolve_path = path.join(__dirname, ".. /components"."");
    returnprivete_page_resolve_path; } / /.. Exports = {// exports.. Before and after the code does not show haalias: {
        "@": resolve("src"),
        "p~": private_resolve()
    }
}
Copy the code

Then all projects can be introduced.

import test 'p~/test'
Copy the code

other

NPM link can also be used to create soft links. Then with the private NPM, use Verdaccio to build the private NPM, the portal

Add a React project

A project called admin is created above. We will now add a React (using TSX) project next to it. The name, we’ll call it PC

Add the following properties to the package.json script

"pc-dev": "node build/dev-server.js pc 3035 main.tsx"."pc-build": "node build/build.js pc".Copy the code

We found that compared with the previous one, we added 3035 port and main.tsx. This is because the same port will not be able to start multiple projects, so customize the port. The main. TSX is due to a change in the startup entry, as our React project doesn’t use main.js as the entry anymore.

Modify the config/index. Js

Const default_port = 7080 const default_main_filename ='main.js'var projects_root_dir = process.argv[2] var projects_port = process.argv[3] || default_port var projects_main_filename = Process. The argv [4] | | default_main_filename / / - and then modify the following two places module. Exports = {projects_root_dir, // Add projects_main_filename... CODE dev: { ... // Modify port: projects_port,... CODE } ... CODE }Copy the code

With the properties set, modify the entry and add the extension (optional, but recommended), and TSX (JSX if not TS). Open webpack.base.conf.js to change

. // Modify entry: {app: './${config.projects_root_dir}/src/${config.projects_main_filename}`}... // Add extensions: [".js".".vue".".json".".jsx".'.ts' , '.tsx']... // const tsImportPluginFactory = require('ts-import-plugin') Introduce oh. // npm run install ts-import-plugin --save-dev {test: /\.tsx? $/, loader:'ts-loader',
    options: {
        transpileOnly: true,
        getCustomTransformers: () => ({
          before: [ tsImportPluginFactory( /** options */) ]
        }),
        compilerOptions: {
          module: 'es2015'
        }
    },
    exclude: /node_modules/,
    include: [resolve("src"), private_resolve()]
},
...
Copy the code

When you’re done, create a new PC directory and add an index. HTML div with an ID to it. And create a new tsconfig.json, which can refer to one of my projects tsconfig.json, click to view

Create a new SRC and add main. TSX to it. (As shown below)

Ract code can be refer to the view

React and Vue call components to each other

See vuera

More and more

It seems possible to generate routes based on directories uniformly, but there are limitations. It is best to keep code routing consistent with directory routing so that the rest of the team’s code doesn’t have to go through the Router table and then locate it.

– the –