So, I began all kinds of learning and sorting.
Create a pure Webpack project
In Unmasking TypeScript juejin.cn/post/690313… In the Webpack project, I have written all kinds of sample code, and finally I can put it into practice. So the pure Webpack project we want to create needs an environment that can provide TS. Let’s start with the specific configuration from 0 to 1:
NPM init --yes TSC --init ## Install module_name -d: NPM install module_name --save-dev devDependencies DevDependencies is just for development use. The other thing is to avoid incompatibilities, NPM I webpack@4 webpack-cli@3 webpack-dev-server -d NPM I html-webpack-plugin clean-webpack-plugin webpack-merge Webpack.base.config. js is common to both development and production packaging environments. Webpack.dev.config. js is the configuration of the development environment, devtool is configured as eval-cheap-module-source-map, does not display error information column number, locate the source code, and can ensure build\rebuild speed. Webpack.pro.config. js is a production environment configuration ### write startup and package commands in package.json file, write startup and package commands respectively. The startup script uses webpack-dev-server and the packaging script uses Webpack. ### Package NPM run buildCopy the codeAt this point, we are finished building the Webpack 4+TypeScript project. This part github: github.com/YY88Xu/ts-i…
Encapsulate Vue components
Environment set up
We continue to build on the projects in the previous chapter:
### add Vue NPM I vue@2 // Specify Vue version NPM I VUe-loader vue-template-compiler CSS-loader -d // Required by development environmentCopy the codeTo use Vue full version, you need to configure an alias in the packaging tool:
// webpack.base.config.js
module.exports = {
...
resolve: {
alias: {
vue: 'vue/dist/vue.esm.js'
}
},
}
Copy the codeConfigure the loader used by.vue and.css. Here we also modify the ts-loader configuration, because we will also write the code for TS in the.vue file.
// webpack.base.config.js
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.tsx?$/i,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
],
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'style-loader',
'css-loader'
]
}
]
},
Copy the codeLoading VueLoaderPlugin
// webpack.base.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin'); . plugins: [ new VueLoaderPlugin() ]Copy the codeConfigure the vUE declaration file vue-shims.d.ts
// vue-shims.d.ts
declare module '*.vue'{
import Vue from 'vue'
export default Vue
}
Copy the codeTo use TypeScript in Vue, we add two more steps to our previous configuration:
- New ts-loader for compiling.ts files;
- New vUE declaration files for TypeScript to recognize vUE.
Component packaging
Encapsulate the paging component, the function is relatively simple, as follows:
Modify the webPack configuration file
The development environment is used to display and test our written components, while the production environment is used to package our components into JS files, so webpack.pro.config.js and webpack.dev.config.js are configured with different entry files and packaged files.
Added the main.ts file as the import file in the production environment
// main.ts imports our component and exports it. import SamplePage from './components/SamplePage.vue'; export default SamplePage; //webpack.pro.config.js module.exports = { entry: './src/main.ts', output: { filename: 'samplepage.js ', // set libraryTarget: 'umd', // set library exposure to' umD '. This scheme supports CommonJS, CommonJs2, AMD, and can be used in browsers and nodes. library: 'SamplePage' }, }Copy the codeThe development entry is still index.ts.
Write a component declaration file
To support TypeScript syntax recognition, add the component samplepage.d. ts declaration file to the types folder and create the samplepage.d. ts file. Write the corresponding declaration file:
import Vue from 'vue';
declare class SamplePage extends Vue{
zoomList: number[];
height: string;
changePage(params: number): void;
}
export as namespace SamplePage
export = SamplePage
Copy the codeModify the package.json configuration file
Modify the entry file of package.json to the packaged component file, that is, the samplepage.js file. Also, specify the location of the declaration file.
. "main": "./dist/samplePage.js", "types": "./types/samplePage.d.ts"Copy the codeAt this point, we’ve wrapped up a Vue component and are waiting for release. Github: github.com/YY88Xu/samp…
Release the component
Log in to NPM first. If you don’t have an account, you can register on the official website: www.npmjs.com/
// login to the project terminal NPM publish // publishCopy the codeYou may encounter NPM ERR! 403 403 Forbidden – PUT registry.npm.taobao.org/sample-page – [no_perms] Private mode enable, Only admin can publish this module because the mirror source has been switched to Taobao source and needs to be switched back to NPM.
// Check the current login source: NPM config get registryCopy the code
Taobao source, need to cut back to NPMJS source, enter the following command:
npm config set registry=http://registry.npmjs.org
Copy the codeNPM ERR! You do not have permission to publish “package-demo”. Are you logged in as the correct user? : package-demo
If you can’t find the name of your module, you can use it. Change the name in package.json, and re-publish NPM.
Use your own published components
In a new project, install components into the project using the NPM install sample-page command. You can use the sample-Page component in a component.
<template> <div> <p> <SamplePage :zoomList=" MSG "></SamplePage> </div> </template> <script lang="ts"> import Query from 'vue-employee-query'; export default { name: "App", components: { SamplePage }, data(){ return { msg: 2 } } } </script>Copy the codeZoomList: zoomList: zoomList: zoomList: zoomList: zoomList: zoomList: zoomList: zoomList: zoomList: zoomList: zoomList
