Suggest to support LiveScript

[wuxianliang]

Dear @SimulatedGREG
Thank you very much! This project help me a lot! But I partially failed when I add LiveScript. It is easy to use LiveScript inside Vue's component, but outside. I have tried for a long time but never found a similar solution. Could not understand why adding this snippet in webpack.config.js does not work. @roosephu would you like to share more knowledge on this issue? Thanks.

{
      test: /\.ls$/,
      loader: 'livescript-loader'
},

[roosephu]

You are having troubles using LiveScript outside Vue? I did encounter a problem with LS but it's inside Vue. I'm using vue-livescript-loader instead of livescript-loader, and actually I hacked it. I changed https://github.com/borestad/vue-livescript-loader/blob/master/index.js#L14 to

source = source.replace(/[\/]{2}/g, '#');

It seems that source uses \n to separate lines.

And could you please post your error messages?

[SimulatedGREG]

@wuxianliang

I'm having no issues when using LiveScript outside of a Vue component file. Were you sure to install the livescript-loader in the correct package.json? (more info)

Steps I took to get this working:

1. Use vue-cli to scaffold a new project
2. Installed livescript-loader in root directory of application (not inside the app directory).
3. Added the loader to webpack.config.js (at line 43, just after vue-loader)

{
  test: /\.ls$/,
  loader: 'livescript-loader'
}

Then made a test.ls file inside ./app/src with...

console.log 'hello world'

And imported test.ls in main.js

import './test.ls'

Lastly, I started the app with npm run dev and saw that 'hello world' was in console.

[SimulatedGREG]

@roosephu
As for your situation, this would be a problem with vue-loader. Please check out this issue. There's already a pull request to fix, so hopefully that happens soon 😁. And if you are wanting to use both LiveScript and JavaScript WITH eslint then make sure to check this issue out as well.

After manually fixing vue-loader, I was able to use LiveScript inside my Vue component file and confirmed that my component had the variable foo inside vue-devtools.

<script lang="livescript">
  module.exports =
    data: !->
      return { foo: 'bar' }
</script>

[roosephu]

@SimulatedGREG Thanks! When I take a closer look at vue-livescript-loader's source file this time, I notice that it mentioned this issue. It's a shame that I ignored the comments. Anyway, thanks for the suggestions 😄 .

[wuxianliang]

Thank you very much! @SimulatedGREG @roosephu
I have understood the problem. I missed this fact that Js and Ls would import .js file first.
When we have store.js file and store.ls file at the same time, with import/require! store Js and Ls will import store.js only even if it is empty. If we want to import .ls file, we need to import store.ls

import abc from 'store.ls'

When we have store.ls only, we do not need to indicate .ls. Just

import/require! store 

Less projects are using LiveScript and JavaScript at the same. Never see

import abc from 'store.ls'

Now I got it. Thank you very much!

[SimulatedGREG]

Glad to hear everything is working for you now. If you don't want to keep adding .ls to your imports you could try adding the extension to the webpack.config.js.