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 –