Node.js 软链接

场景描述

在H5端 & PC端进行功能开发的时候， 需要引入同一个业务组件， 比方说TestComponent

分析

将公共的业务组件进行抽离，不管是H5端，亦或者是PC端, 在使用的时候，我们都可以利用ES Module的形式进行按需引入使用

• 我们的业务组件在本地有修改，在其他项目引入该组件库的时候如何更新使用呢？
• 第一种办法是发布一个新的npm版本到npm, 在我们引入该库的项目中修改版本号，进行更新
• 第二种办法将依赖直接关联到我们的本地系统中，而非从npm 上下载

项目

假设 我们的业务组件项目(A) & 测试项目（B）在同一级目录
+ A 中的各个业务组件以插件的形式进行全局向外暴漏

  import { App } from 'vue'
  import TextComponent from './components/TestComponent'
  const components = [
      TextComponent,
  ]
  const install = (app: App) => {
      components.forEach(component => {
        app.component(component.name, component)
      })
  }
  export {
      install,
      TextComponent
  }
  export default {
      install
  }

  // src/index.ts   

+ A 假设采用Rollup进行打包

  import vue from 'rollup-plugin-vue'
  import css from 'rollup-plugin-css-only'
  import typescript from 'rollup-plugin-typescript2'
  import { nodeResolve } from '@rollup/plugin-node-resolve'
  import { name } from '../package.json'
  const file = type => `dist/${name}.${type}.js`
  const overrides = {
        compilerOptions: { declaration: true },
        exclude: ["node_modules", "src/App.vue", "src/main.ts"]
  }
  export { name, file }
  export default {
        input: 'src/index.ts',
        output: {
          name,
          file: file('esm'),
          format: 'es'
        },
        plugins: [
          nodeResolve(),
          typescript({ tsconfigOverride: overrides}),
          vue(),
          css({ output: 'bundle.css' })
        ],
        external: ['vue', 'lodash-es']
  }

  // build/rollup.config.js

  "name": "test-bricks",
  "version": "1.0.0",
  "main": "dist/test.esm.js",
  "module": "dist/test.esm.js",
  "types": "dist/src/index.d.ts",
  “scripts”: {
      "build": "rollup --config build/rollup.config.js"
  }

  // package.json

• 测试项目(B) & 业务组件项目(A)相同使用vue-cli 快速生成

  import { createApp } from 'vue'
  import testBricks from 'test-bricks'
  const app = createApp(App)
  app.use(testBricks)
  app.mount('#app')

  // main.ts

  "dependencies": {
      "test-bricks": "1.0.0"
  }

  // package.json

操作

+ A: npm link
+ B: npm link test-bricks
+ cd A
+ npm link ../B/node_modules/vue [步骤4]

问题点？

步骤4解释？

在我们的本地测试项目中使用的node_modules下面的Vue的App类型与我们测试中使用的node_modules 下面的Vue的App类型不一致

npm link 的时候没有出现一个软链接到全局？

猜测是node 的版本问题，尝试使用12.5.0版本

• nvm install v12.5.0
• nvm use 12.5.0
• nrm list

猜测是镜像源问题，可以尝试切换

• nrm ls
• nrm npm
• nrm current

欢迎关注公众号，一起学习

前端成长